当父元素是弹性项目时，为什么（标准方法）不能使元素的高度达到其父元素的 100% 在 Safari 中工作？

Question

我正在使用 Whosebug 答案中最常见的方法，使子元素的高度达到其父元素的 100%，即相对定位父元素，然后为子元素提供以下样式：

position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;

但是，请看一下this Codepen implementation of the above。在其中，我将父元素设为弹性项目，将子元素设为 table（或 <div> 和 display: table）。我需要为客户的真实世界设计案例执行此操作，部分是为了垂直对齐中间的文本，我相信只有 tables 可以做到。

如您所见，它在 Safari 中出现问题。但看起来 CSS 应该有效，在 Chrome 中也是如此。为什么它在 Safari 中崩溃了？我该如何解决这个问题？

PS：如有必要，我愿意采用其他方法使子项的高度达到其父项的 100% 高度。

Answer 1

如果parent显示：flex； flex-direction：专栏；和 child flex-grow:1;它应该工作。

<div class="parent">
  <div class="child">
      Content
  </div>
</div>

.parent{
  display:flex;
  flex-direction: column;
  background:blue;
  height: 300px;
}

.child{
  flex-grow:1;
  background:red;
  display:flex;
  align-items:center;
}

勾选这个code pen

当父元素是弹性项目时，为什么（标准方法）不能使元素的高度达到其父元素的 100% 在 Safari 中工作？

Why doesn't (the standard way of) making an element 100% the height of its parent work in Safari when the parent's a flex item?

css

css-position

absolute