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