html - 为什么这个 flex item 有高度限制？

Question

我偶然发现了一些发生在我的 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 容器的高度。另一方面，固定高度的非 flex 容器内的等效 div 只会扩展到其内容的大小。

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

Answer 1

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

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

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

但是，需要满足两个条件:浏览器需要想要调整元素的大小，并且元素需要可调整。

为了让浏览器想要调整元素的大小，它需要是一个满足上述条件的 flex 元素，因为它的横向尺寸(最终可能决定它的宽度或高度)被计算由浏览器与其容器的横向尺寸相关。

要使元素在此上下文中可调整大小，需要不将flex-shrink设置为0(注意 flex:none 是将 flex-shrink 设置为 0 等的简写)，并且有 overflow :hidden 设置(大概给浏览器“权限”来调整 flex 元素的大小，使其内容比它大，然后隐藏)。只有这样，浏览器才会真正调整 flex 元素本身的大小。

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