绝对弹性盒容器中弹性项目中溢出隐藏项目的高度答案

【问题标题】：Height of overflow-hidden item in flex item in absolute flexbox container绝对弹性盒容器中弹性项目中溢出隐藏项目的高度
【发布时间】：2017-06-21 05:56:13
【问题描述】：

我有以下简单的 HTML sn-p，它在 Chrome 和 Safari 中的结果不同

<body>
  <div id="1" style="position: absolute; display: flex; flex-direction: column; /* height: 78px; */">
    <div id="2" style="height: 100%; display: flex; flex-direction: column;">
      <div id="3" style="position: relative; overflow: hidden;">
        <p><span>CSS</span></p>
      </div>
    </div>
</div>

内容在 Chrome 中完美显示，而在 Safari 中，#3 高度为 0。

如果我执行以下操作之一

将显式高度设置为#1
删除height: 100% 上的#2
删除overflow:hidden 上的#3
删除#1 或#2 上的disaplay:flex

所有元素的高度在 Safari 中计算正确。这可能是 Safari 的 Flexbox 的问题，但不确定是什么原因。

【问题讨论】：

标签： html css safari flexbox

【解决方案1】：

如果#2 是列方向的弹性容器，则#3 是具有垂直内联轴的弹性项目。要让 #3 占据父级的全部高度 - 在不会自动发生的浏览器中 - 只需给 #3 这条规则：flex: 1 或 height: 100%。

【讨论】：

感谢您的回复。我尝试了您在#3 中提到的两条规则，但它们在 Safari 中不起作用。
我阅读了很多关于 Flexbox 的答案，实际上在您回复之前很期待您的回答 :) #2 设置为 height:100%，它依赖于 #1 的高度，而#1 绝对定位并且没有设置height，我想#1 会尝试使用内容高度，对吗？
浏览器行为可能会有所不同。在子级上使用百分比高度时，在父级上指定高度总是更安全。 jsfiddle.net/3jtr3h9e
#3 是overflow:hidden 然后它会尝试根据父块的高度和宽度裁剪内容，即#2。然而#2 的高度由#1 决定，但#1 的高度仍然未知。这就是我看到问题的方式，但我仍然不明白为什么display:flex 会影响行为。无论如何，你是对的百分比是不安全的，谢谢！
如果你想发更清晰详细的demo，我再看一遍。