高度：100％不能在柔性箱内工作flex-grow

蓝色箱子应该是100％的高度。它适用于为div.a设置像素高度，但不幸的是，这不适用于真实世界的情况。高度：100％不能在柔性箱内工作flex-grow

这或许说明了一切： 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>

来源

2016-06-21 Seppo420

c上的高度：100％，它需要父母的高度。但没有高度或100％的父母的高度是不是整个屏幕.. – MrBuggy

删除'高度：100％'在'.b2' – blonfu

您不需要百分比的高度，以达到此布局。它可以单独弯曲特性来构建：

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

如果使用百分比高度是必须的，然后再考虑适当的执行：

来源

2016-06-21 12:45:56

我认为这种行为是奇怪的（但所有的浏览器似乎做所以）。 “灵活增长”元素中的100％如何不会达到其计算大小的100％？ – einord

@einord，完整的解释在我的答案末尾的链接引用中。 –

你必须给div.a 100％的高度，因为div.c和它的高度为100％取其父母的高度。但是，当没有任何高度，它不能100％工作... https://jsfiddle.net/h2yvoeL0/1/enter code here

干杯。

来源

2016-06-21 12:46:21 MrBuggy

高度：100％不能在柔性箱内工作flex-grow

回答

相关问题