Html Flexbox填充剩余高度为100%

为什么“方框2”没有填满全部（可用）空间？高度：100%被忽略

HTML:

---

谢谢

这是因为父级

#container

元素的高度不是

100%

。此时，

主体

元素的高度由

#容器

元素的高度决定（因为它是唯一的子元素）。由于您使用百分比定义了

#container

元素的高度，因此该高度将保持不变，因为父元素的高度也是相同的

您需要将

html

/

body

元素的

高度设置为
100%
：


..或者您可以在以下位置定义
#容器
元素的高度：


使用百分比（%），而不是像素（px）
<div id="container">
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>
</div>

body{margin:0 auto;}

#container{width:100%;height:100%;background:#ccc;display:-webkit-flex;display:flex;flex-direction:column}

#box1 {background:red;height:50px}
#box2 {background:yellow;-webkit-flex:1;flex:1}
#box3 {background:green;height:50px}

html, body, #container {
    height: 100%;
}

#container {
    height: 100vh;    /* 100% of the viewport height */
}