Question

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

您可以在Codepen中看到绿框只是水平拉伸，而不是垂直拉伸。

我见过the similar question。但是，一旦我将一个CSS表放在一个flexbox子项中，它也会停止工作。

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

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

CSS高度：100％没有在Flexbox Child中的表上工作

1 个答案: