了解Flexbox和溢出：自动 [英] Understanding flexbox and overflow:auto

问题描述

在下面的问题中，我已经能够解决所有的问题，我只是想调试我的思维模型。我也只关心Chrome，如果这使得回答更容易。

我有一个溢出：自动内嵌套的圣杯flexbox布局。 overflow：auto 行为对 2级和 3级嵌套。

但是，一旦我开始 4级嵌套，它会断裂，要求我来指定 min-height：0 属性（尽管我一直通过<$ c指定了 flex-basis：0 $ c> flex：1 ，这应该取消 flex-basis：content / content-sized默认值）。

另外，我需要对 min- height：0 到 .orange 。 为什么这个元素，为什么不是其他祖先？

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

请注意，这与其他问题有所不同找到关于柔性盒和溢出，例如（特别是我的答案）：

overflow：auto嵌套的flexboxes

嵌套的flexbox与滚动区域

解决方案在嵌套的圣杯flexbox布局中，我有一个 overflow：auto 。 overflow：auto 行为对于2级和3级嵌套行得通。

您的 2级代码的确可以在Chrome和IE11中正常工作。但是，它在Firefox中失败。与 3级代码相同：适用于Chrome和IE11，但不适用于Firefox。

然而，一旦我达到4级嵌套，它会断裂，要求我指定 min- （尽管我一直指定 flex-basis：0 通过 flex：1 c>，它应该取消 flex-basis：content / content-sized
的默认值）。为什么这只发生在4级嵌套？




再一次，您的声明对于Chrome和IE11，但不适用于Firefox。

---

解决方案

让我们从修正开始，让所有的演示在Chrome，Firefox和IE11上运行。 （我没有在Safari中进行测试，但那是WebKit，比如Chrome，所以对于任何的供应商前缀都可以。 ）

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

修订的2级 （添加两行代码）

  .violet {
 flex：1; 
背景：紫罗兰色; 
 display：flex; 
 flex-direction：column; 
 min-height：0; / * new * / 
 min-width：0; / * new * / 
} 
  

修改后的3级 （添加了四行代码）

  .violet {
 flex：1; 
背景：紫罗兰色; 
 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 * / 
} 
  

修改4级 （添加一行代码）

  .violet {
 flex：1; 
背景：紫罗兰色; 
 display：flex; 
 flex-direction：column; 
 / *由于某些原因，这是不需要的* / 
 / * min-height：0; * / 
 min-width：0; / *新* / 
} 
  

---

打破行为

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

1。计算百分比高度

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

这是在规范中说的：

CSS height 属性

百分比
指定百分比高度。百分比是根据生成的包含盒子的高度来计算的。如果没有明确指定包含块的高度，并且该元素没有被绝对定位，则该值计算为auto。

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

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

根据 height 定义，这个解释可以很容易地就是计算高度，但是 height 属性需求已经成为主要的实现。在处理百分比高度时，我从未见过 min-height 或 max-height p>

在计算高度时，Chrome预计会看到 height 属性。如果不是，则计算高度为 auto 。然而，Firefox对规范有更广泛的解释。它也接受flex高度（如 here 和 此处 和 此处

目前尚不清楚哪些浏览器更符合要求。

自1998年以来并没有帮助 height 属性定义没有被更新（



以下是一些详细信息： 使用CSS height 属性和百分比值



2。 为什么flex项目收缩过去的内容大小？

3。 flex-basis：0 vs flex-basis：auto

flex：1 1 auto （或 flex：auto ，根据内容大小或高度属性来设置弹性项目大小。

flex：1 1 0 code> flex：1 ），根据flex容器中的可用空间大小来决定flex项目的大小。

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

更多详细信息，请参阅： 页面填充flexbox布局，顶部和侧面栏不能正常工作

In the following questions, I've been able to get all the cases to work out, I'm just looking to debug my mental model. I'm also only concerned with Chrome, if that makes answering easier.

I have an overflow:auto within nested "holy grail-ish" flexbox layouts. The overflow:auto behavior works fine for 2-level and 3-level nesting.

However, once I get to 4-level nesting, it "breaks," requiring me to specify the min-height:0 property (despite my having consistently specified flex-basis:0 via flex:1, which should annul the flex-basis:content/content-sized default). Why is this only happening at 4-level nesting?

Also, the element I need to slap the min-height:0 onto is .orange. Why this element, and why not the other ancestors?

Can anyone explain the above two questions? I have been consulting the spec and am having trouble connecting its rules back to my 4-level-deep example.

Note that this is different from the other questions I've been able to find on SO regarding flexbox and overflow, for instance (see in particular my answers):

overflow: auto in nested flexboxes

Nested flexbox with scrolling area

解决方案

I have an overflow:auto within nested "holy grail-ish" flexbox layouts. The overflow:auto behavior works fine for 2-level and 3-level nesting.

Your 2-level code does indeed work as intended in Chrome, and IE11. However, it fails in Firefox. Same thing with your 3-level code: Works in Chrome and IE11, but not Firefox.

However, once I get to 4-level nesting, it "breaks," requiring me to specify the min-height:0 property (despite my having consistently specified flex-basis:0 via flex:1, which should annul the flex-basis:content/content-sized default). Why is this only happening at 4-level nesting?

Once again, your statement is true for Chrome and IE11, but not for Firefox.

---

Solutions

Let's start with the fixes, so that all demos work in Chrome, Firefox and IE11. (I didn't test in Safari, but that's WebKit like Chrome, so it should be fine with vendor prefixes for any versions prior to 9.)

Also, I'll use compiled code in the answer, as not everybody uses preprocessors.

Revised 2-level (added two lines of code)

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

Revised 3-level (added four lines of code)

.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 (added one line of code)

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

---

Breaking Down the Behavior

There's a lot going on with your nesting. I'm not going to debug the code line-by-line, but I'll offer three concepts that may be useful to you.

1. Calculating Percentage Heights

Chrome, Firefox and IE11 can have different interpretations for an element's height.

Here's what it says in the spec:

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".

auto
The height depends on the values of other properties.

Traditionally, when calculating percentage heights, browsers have interpreted the spec's use of the term "height" to mean the value of the height property.

Based on a reading of the height definition, the interpretation could just as easily be the computed height, but the height property requirement has become the predominant implementation. I've never seen min-height or max-height work on a parent when dealing with percentage heights.

Chrome expects to see the height property when calculating height. If it doesn't, it computes the height to auto. Firefox, however, has a broader interpretation of the spec. It accepts flex heights, as well (as evidenced here and here and here).

It's not clear which browsers are more compliant.

It doesn't help matters that the height property definition hasn't been updated since 1998 (CSS2).

In all three of your demos you're combining percentage heights, pixel heights and flex heights. You may want to keep the differing browser interpretations in mind when troubleshooting your code.

Here are some more details: 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 (or flex: auto, for short), sizes a flex item based on the content size or height properties.

flex: 1 1 0 (or flex: 1, for short), sizes a flex item based on the free space in the flex container.

Each may have a different effect on the behavior of overflow: auto.

More details here: Page-filling flexbox layout with top and side bars not quite working

这篇关于了解Flexbox和溢出：自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！