html - CSS 高度 :100% not working on Table inside Flexbox Child

Question

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

你可以在Codepen中看到绿框只在水平方向上拉伸(stretch)，而不是在垂直方向上拉伸(stretch)。

我看过 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