height:100% 不能在 flexbox 中使用 flex-grow答案

【问题标题】：height:100% not working inside flexbox with flex-growheight:100% 不能在 flexbox 中使用 flex-grow
【发布时间】：2016-11-30 20:43:42
【问题描述】：

蓝色框的高度应为 100%。当我为div.a 设置像素高度时它可以工作，但不幸的是，这不是现实世界案例的选项。

这可能解释了一切： http://codepen.io/anon/pen/jrVEpB

.a{
  background-color:red;
  display:flex;
}
.b1{
  flex-grow:0;
  background-color:green;
}
.b2{
  flex-grow:1;
  background-color:yellow;
  height:100%;
}

.c{
  height:100%;
  background-color:blue;
}

<div class="a">
  <div class="b1">
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    
  </div>
  <div class="b2">
      <div class="c">
          miksi et ole full height saatana
      </div>
  </div>
</div>

【问题讨论】：

在 c 上的 height:100%，它采用它的父级的高度。但是没有高度，或者它的父级的 100% 的高度不是整个屏幕..
删除.b2中的height:100%

标签： html css flexbox

【解决方案1】：

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

.a {
  display: flex; 
  background-color: red;
}
.b1 {
  background-color: green;
}
.b2 {
  flex: 1;
  display: flex;
  background-color: yellow;
}
.c {
  flex: 1;
  background-color: blue;
}

body { margin: 0; }

<div class="a">
  <div class="b1">
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
  </div>
  <div class="b2">
    <div class="c">
      miksi et ole full height saatana
    </div>
  </div>
</div>

如果必须使用百分比高度，那么请考虑正确的实现方式：

【讨论】：

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

【解决方案2】：

您必须为 div.a 指定 100% 的高度，因为 div.c 及其 100% 的高度取其父级的高度。但是当没有任何高度时，它就无法使用 100%...https://jsfiddle.net/h2yvoeL0/1/enter code here

干杯。

【讨论】：