Question

在以下问题中，我已经能够解决所有问题，我只是想调试我的心理模型。我也只关心Chrome，如果这样可以让答案变得更轻松。

我有一个overflow:auto嵌套＆＃34;圣杯＆＃34; flexbox布局。 overflow:auto行为适用于2-level和3-level嵌套。

然而，一旦我进入4-level筑巢，它会打破，＃34;要求我指定min-height:0属性（尽管我一直通过flex-basis:0指定flex:1，这应该取消flex-basis:content /内容大小的默认值。 为什么这只发生在4级嵌套？

此外，我需要拍摄min-height:0的元素是.orange。 为什么这个元素，为什么不是其他祖先？

任何人都可以解释上述两个问题吗？我一直在咨询规范，并且无法将规则连接到我的4级深层示例。

请注意，这与我在SO上关于flexbox和溢出的其他问题不同（例如，请参阅我的答案）：

overflow: auto in nested flexboxes

Nested flexbox with scrolling area

Answer 1

我有一个overflow:auto嵌套＆＃34;圣杯＆＃34; flexbox布局。 overflow:auto行为适用于2级和3级嵌套。

您的2-level代码确实可以在Chrome和IE11中正常使用。但是，它在Firefox中失败了。您的3-level代码也是如此：适用于Chrome和IE11，但不适用于Firefox。

然而，一旦我进入4级嵌套，它会打破，＃34>要求我指定min-height:0属性（尽管我一直通过flex-basis:0指定flex:1，这应该取消flex-basis:content /内容大小默认）。 为什么这只发生在4级嵌套？

再一次，您的陈述适用于Chrome和IE11，但不适用于Firefox。

解决方案

让我们从修复开始，以便所有演示都适用于Chrome，Firefox和IE11。（我没有在Safari中测试，但那个WebKit就像Chrome一样，所以vendor prefixes for any versions prior to 9应该没用。）

另外，我会在答案中使用已编译的代码，因为不是每个人都使用预处理器。

Revised 2-level（添加了两行代码）

.violet {
  flex: 1;
  background: violet;
  display: flex;
  flex-direction: column;
  min-height: 0; /* new */
  min-width: 0; /* new */
}

Revised 3-level（添加了四行代码）

.violet {
  flex: 1;
  background: violet;
  display: flex;
  flex-direction: column;
  min-height: 0; /* new */
  min-width: 0; /* new */
}

.orange {
  flex: 1;
  background: orange;
  display: flex;
  min-height: 0; /* new */
  min-width: 0; /* new */
}

Revised 4-level（添加了一行代码）

.violet {
  flex: 1;
  background: violet;
  display: flex;
  flex-direction: column;
  /* For some reason this is not needed */
  /* min-height:0; */
  min-width: 0; /* new */  
}

打破行为

你的筑巢还有很多事情要做。我不打算逐行调试代码，但我会提供三个可能对您有用的概念。

<强> 1。计算百分比高度

Chrome，Firefox和IE11对元素的高度有不同的解释。

以下是规范中的内容：

CSS height property

百分比
指定百分比高度。百分比是根据生成的包含块的高度计算的。如果未明确指定包含块的高度且该元素未完全定位，则该值计算为＆＃34; auto＆＃34;。

自动
高度取决于其他属性的值。

传统上，在计算百分比高度时，浏览器已经解释了规范使用术语＆＃34; height＆＃34;表示height属性的值。

根据对height定义的解读，解释可以很容易地成为computed height，但height属性要求已成为主要的实现。在处理百分比高度时，我从未见过min-height或max-height在父母身上工作。

Chrome希望在计算身高时看到height属性。如果它没有，则计算高度为auto。然而，Firefox对规范有更广泛的解释。它也接受弹性高度（证明here和here和here）。

目前尚不清楚哪些浏览器更符合标准。

自1998年以来height属性定义未经更新（CSS2），这无济于事。

在您的所有三个演示中，您将百分比高度，像素高度和弹性高度组合在一起。在对代码进行故障排除时，您可能需要记住不同的浏览器解释。

以下是一些详细信息：Working with the CSS height property and percentage values

<强> 2。 Why doesn't flex item shrink past content size?

<强> 3。 flex-basis: 0 vs flex-basis: auto

flex: 1 1 auto（或简称为flex: auto），根据内容大小或高度属性调整弹性项目的大小。

flex: 1 1 0（简称flex: 1），根据弹性容器中的可用空间调整弹性项目的大小。

每个可能会对overflow: auto的行为产生不同的影响。

此处有更多详情： Page-filling flexbox layout with top and side bars not quite working

了解flexbox和overflow：auto

1 个答案:

解决方案

打破行为