为什么这个弹性项目有它的高度限制？答案

【问题标题】：Why does this flex item have its height limited?为什么这个弹性项目有它的高度限制？
【发布时间】：2016-02-13 06:08:59
【问题描述】：

我偶然发现了一些发生在我的 flex 子项上的事情，如 this JSFiddle 所示。

这是代码：

<div style="position:absolute; top:10px; left:10px; background-color:yellow; height:50px; width:200px; display:flex; flex-direction:column;">
    <div style="overflow:hidden;">inner div text<br>inner div text<br>inner div text<br>inner div text<br>inner div text</div>
</div>

<div style="position:absolute; top:10px; left:250px; background-color:green; height:50px; width:200px;">
    <div style="overflow:hidden;">inner div text<br>inner div text<br>inner div text<br>inner div text<br>inner div text</div>
</div>

<div style="position:absolute; top:200px; left:100px; border:1px solid black; height:300px; width:300px; overflow:hidden;">
    <div style="overflow:hidden;">
        Why does the inner div on the yellow left have its height limited to that of its container, but not the inner div on the green right?  As far as I can tell there are 4 things combined that trigger this:<br>1) the container has position:absolute<br>
        2) the container has a fixed height/width<br>
        3) the container is flexbox<br>
        4) the flex item has overflow:hidden<br><br>But I can't find anything exactly in the flexbox spec to cause this behaviour.  Why is it happening?
    </div>
</div>

基本上，当设置overflow:hidden 时，具有固定高度的 flexbox 容器内的 flex 项目的高度将被限制为 flexbox 容器的高度。另一方面，固定高度的非弹性容器内的等价 div 只会扩展到其内容的大小。

在 flexbox 规范中的什么地方指定了这种行为？这只是浏览器的怪癖吗？这似乎不太可能发生在 Firefox、Chrome 和 IE 中。假设它是定义明确的 flexbox 行为，我想确切地知道它是如何以及何时触发的。另请注意，当您从 child（而不是容器）中删除 overflow:hidden 时，它的高度将不再受到限制。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

好的，我想我知道发生了什么。

在 flexbox 之前，如果不明确设置元素的宽度/高度，就无法使元素小于其内容的大小。使用 flexbox，还有第二种方法。

Para 9.11 的 flexbox 规范讨论了如何计算 flex-item 的交叉大小。基本上，如果弹性项目设置了align-self: stretch（在我的示例中确实如此），它将尝试填充容器的弹性线（在我的示例中为垂直线，即高度）。这是隐式设置弹性项目的高度，而不是显式使用height 属性。容器本身也需要有一个确定的高度，才能传递给 flex 项（在我的示例中，容器的高度是通过 height CSS 属性显式设置的，我想这最终需要在某个时间点完成链）。

但是，需要满足两个条件：浏览器需要想要调整item的大小，并且item需要resizable。

为了让浏览器想要调整item的大小，它需要是一个满足上述条件的flex item，才能计算出它的cross size（最终可能决定它的宽度或高度）由浏览器相对于其容器的交叉大小。

要使项目在此上下文中可调整大小，它需要不将flex-shrink 设置为0（注意flex:none 是设置的简写flex-shrink 到 0 等等），并设置了 overflow:hidden（大概是给浏览器“允许”调整 flex 项的大小，使其内容大于它并隐藏）。只有这样浏览器才会真正调整弹性项目本身的大小。

这与在 flexbox 模型之外发生的行为明显不同，其中固定高度/宽度容器的子容器可能会将其内容剪辑，但它会保留必要的大小来保存其内容.部分内容将仅被隐藏。在这里，弹性项目确实（可能）被调整为小于其内容的大小，这具有非常重要的意义（特别是如果您希望子元素具有其内容的滚动条）。

【讨论】：