Question

我有一个具有某些样式的组件。

此组件称为Box。盒子有一个min-width和一个min-height。

当我运行Box时，其中的内容不可见。在源代码中，我可以看到其中的内容。

Box组件：

export const Box = styled.div<IStyledPopUp>`
    position: fixed;

    top: ${(props:IBox) => props.center ? null : props.top};
    left: ${(props:IBox) => props.center ? null : props.left};
    min-width: ${(props:IBox) => props.width};
    min-height: ${(props:IBox) => props.height};
    margin: ${(props:IBox) => props.center ? null : props.margin};
    padding: ${(props:IBox) => props.padding};

    border-radius: ${(props:IBox) => props.theme.default_border_radius};
    background-color: ${(props:IBox) => props.theme.main_ui_color};
    box-shadow: ${(props:IBox) => props.theme.default_shadow_color};
    font-family: ${(props:IBox) => props.theme.font_family};
    color: ${(props:IBox) => props.theme.text_color};

    max-width: calc(100vw - calc(${(props:IBox) => props.padding} * 2) - calc(${(props:IBox) => props.margin} * 2));
    max-heigth: calc(100vh - calc(${(props:IBox) => props.padding} * 2) - calc(${(props:IBox) => props.margin} * 2));

    text-align: center;

    hr {
        opacity: 0.25;
        margin: 2.5rem 0 1.5rem 0;
    }

    p {
        margin: 1.5rem 0;
    }
`;

使用盒：

<Box>
    <Button
        type="ghost"
        text="Close Box"
    />
</Box>

因此在这种情况下，按钮不在前面。

当我将属性min-width和min-height切换为width和height时，它将显示所有内容。

现在，我只将属性设置为width和height。
但是我很好奇为什么在使用min-width和min-height时会发生这种情况。

为什么使用min-width和min-height时内容会在div下？

0 个答案: