CSS高度：100％无法在Flexbox中的表格中使用子项

Question

我在Flexbox子项中有一个CSS表格。该表的height设置为100%，但它不起作用。

您可以在Codepen中看到绿箱只能水平拉伸，但不能垂直拉伸。我看过the similar question。但是，一旦我将一个CSS表放置在Flexbox子中，它也停止工作。

有趣的是，这个问题影响到Chrome，但不是IE11。

CodePen

HTML：

<div class="flex-box"> 
    <div class="flex-child"> 
    <div class="wrapper"> 
     <div class="table"> 
     <div class="table-cell"> 
      Hello 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.flex-box { 
    width: 500px; 
    height: 500px; 
    background-color: lightblue; 
    display: flex; 
} 

.flex-child { 
    flex-grow: 1; 
} 

.wrapper { 
    width: 100%; 
    height: 100%; 
    background-color: yellow; 
} 

.table { 
    height: 100%; 
    width: 100%; 
} 

.table-cell { 
    height: 100%; 
    width: 100%; 
    background-color: green; 
    text-align: center; 
} 

Answer 1

你缺少父元素上height声明。

试试这个：

.flex-child { 
    flex-grow: 1; 
    height: 100%; /* NEW */ 
} 

Revised Codepen

当谈到在Flexbox的渲染百分比的高度，有浏览器之间的行为差​​异。特别是Firefox/IE与Chrome/Safari/Opera。详细信息请参考这个帖子：

• Heights rendering differently in Chrome and Firefox

此外，作为一般的CSS规则，为百分比高度的子元素上工作，height属性必须在父定义。更多细节在这里：

• Working with the CSS height property and percentage values