Question

我正在为一个项目测试css FLEX。我使用自己的标签。

我创建了一个包含许多flexbox的页面..

简单地：

我创建了一个伸展到查看器窗口限制的容器。 [RED]

我在其中创建了一个网格容器，但这次它使用高度100％。 [PASTELGREEN]

如果我给网格容器的max-height示例给出一个固定的维度：800px;网格容器中的flexbox浮动。

但如果我将身高改为100％;他们不再漂浮了。继续拉伸容器直到不再有弹性物品。

HTML：

<body>
<pc-pagecontainer>
<pc-colgrid>
<pc-box></pc-box><pc-box2></pc-box2><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box2></pc-box2><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box2></pc-box2><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box2></pc-box2>
</pc-colgrid>
</pc-pagecontainer>
</body>

这是CSS

pc-pagecontainer {  
display:flex;display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start;align-items:flex-start;
flex-direction:row;-webkit-flex-wrap: wrap;flex-wrap: wrap;
padding=0;
justify-content:center;webkit-justify-content: center;
min-height:100vh;
min-width=100vw;
background-color:#F00;

}


pc-colgrid{
        display:-webkit-flex;display: flex;flex-direction:column;
       -webkit-align-items:stretch;
       align-items: stretch;
       -webkit-justify-content:stretch ;
       justify-content:stretch ; 
       -webkit-flex-wrap:wrap;flex-wrap:wrap;
       -webkit-align-content:  center;align-content: center;
        padding=0;background-color:#396;max-height:100vh;width:100%;
        }



pc-box {
    display:-webkit-flex;display: flex;flex: 1 1 auto;
    min-width:100px;min-height:100px; background-color:#099; 
    border:1px; border-style:solid;
    }
    pc-box2 {
    display:-webkit-flex;display: flex;flex: 1 1 auto;
    min-width:50px;min-height:100px; background-color: #F90; 
    border:1px; border-style:solid;
    }

以下是它的外观：

我是在努力解决一个错误还是只是做错了什么？ Viewer是Firefox。

Answer 1

vh单位相对于视口。所以max-height: 100vh在没有进一步指导的情况下工作，因为它只是指视口的高度。

%单位是相对于父容器的。因此max-height: 100%解析为height: auto（内容的高度;与示例中一样），除非在父级上定义高度。

要使max-height: 100%生效，请将其添加到您的代码中：

html, body, pc-pagecontainer {
    height: 100%;
}

更多信息：

当维度是相对的时，CSS弹性项目的维度的行为不一致

1 个答案: