Question

蓝色框应为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>

Answer 1

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

＆＃13;

apt-get install htop mc

＆＃13;

.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; }

＆＃13;

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

Answer 2

你必须给div.a一个100％的高度，因为div.c和它的100％的高度取得它的父亲的高度。但是当没有任何高度时，它无法100％... https://jsfiddle.net/h2yvoeL0/1/ $date = new DateTime("2016-05-31T00:42:11.578Z"); $date->add(new DateInterval("PT1S"));

干杯。

高度：100％无法在flexbox中使用flex-grow进行工作

2 个答案: