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容器的高度。另一方面，固定高度非柔性容器内的等效div只会扩展到其内容的大小。

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

Answer 1

好的，我想我弄清楚发生了什么。

直到flexbox，没有明确设置其宽度/高度，就无法使元素小于其内容的大小。使用flexbox，还有第二种方法。

flexbox规范的

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

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

要使浏览器想要调整项目的大小，它需要是一个灵活项目，满足上述条件，因为它的交叉大小（最终可能决定其宽度或高度）需要计算浏览器与其容器的交叉大小有关。

要在此上下文中使项目可调整大小，不需要将flex-shrink设置为0（请注意{{1} }}是将flex:none设置为flex-shrink等的简写，并设置0（可能会给浏览器“权限”以调整弹性项目的大小，使其内容为大于它，并隐藏）。只有这样，浏览器才会实际调整Flex项目的大小。

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

为什么这个弹性项目的高度有限？

1 个答案: