高度：100％不能在flexbox中使用flex-grow [英] height:100% not working inside flexbox with flex-grow

问题描述

蓝框应该是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;背景颜色：黄色;身高：100％;}。

解决方案

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



.a {display：flex ; background-color：red;}。b1 {background-color：green;}。b2 {flex：1;显示：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 saatana< / div>如果使用百分比（百分比），请使用百分比（百分比）。如果使用百分比高度是必须的，然后考虑适当的执行：

• 使用CSS height 属性和百分比值


• 
  

The blue box should be 100% height. It works when I set a pixel height for div.a, but unfortunately this is not an option for the real world case.

This probably explains everything: 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>

解决方案

You don't need percentage heights to achieve this layout. It can be built with flex properties alone:

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

If using percentage heights is a must, then consider the proper implementation:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent

这篇关于高度：100％不能在flexbox中使用flex-grow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！