Html 高度：100%不在flexbox内使用flex grow

蓝色框的高度应为100%。当我为

div.a

设置一个像素高度时，它就起作用了，但不幸的是，在现实世界中，这不是一个选项

这可能解释了一切：

.a{
背景色：红色；
显示器：flex；
}
.b1{
flex-grow:0；
背景颜色：绿色；
}
.b2{
柔性生长：1；
背景颜色：黄色；
身高：100%；
}
c{
身高：100%；
背景颜色：蓝色；
}

胡尔杜尔

胡尔杜尔

胡尔杜尔

胡尔杜尔

胡尔杜尔

胡尔杜尔

miksi和ole全高萨塔纳

实现此布局不需要百分比高度。它可以单独使用flex属性构建：

.a{
显示器：flex；
背景色：红色；
}
.b1{
背景颜色：绿色；
}
.b2{
弹性：1；
显示器：flex；
背景颜色：黄色；
}
c{
弹性：1；
背景颜色：蓝色；
}
正文{margin:0；}

胡尔杜尔

胡尔杜尔

胡尔杜尔

胡尔杜尔

胡尔杜尔

胡尔杜尔

miksi和ole全高萨塔纳

您必须为div.a指定100%的高度，因为div.c及其100%的高度取其父级的高度。但是当没有任何高度时，它无法100%工作……

在此处输入code

---

干杯。

高度：在c上为100%，它取其父代的高度。但是没有高度，或者100%的高度不是整个屏幕。删除

中的
高度：100%
。b2

我认为这种行为很奇怪（但所有浏览器似乎都这么做）。为什么“flex grow”元素内部的100%不会变成其计算大小的100%？einord，完整的解释在我答案末尾的链接引用中。