溢出：嵌套弹性盒中的自动

Question

我目前正在尝试使用 flexbox 布局，但遇到一个问题，当我嵌套多个 flexbox 时，overflow 不会被应用。

只要我只使用一级弹性框（参见示例 1），一切正常：只要其内容超过给定空间，滚动条就会应用于红色框 (#top)。

但是，如果我引入另一层弹性框（参见示例二），则蓝色框上没有滚动条（#right）。相反，滚动条出现在 body 元素上，完全忽略了蓝色框上的 overflow: auto 设置。

所以我的问题是：在使用嵌套弹性框时如何让overflow 工作？

备注：我在 Chrome45、Firefox 40 和 IE11 上对此进行了测试。行为是一致的。

以下是这两种情况的代码和小提琴链接。

---

(1) 只有一个 flexbox，没有嵌套

Fiddle

<div id="container">
    <div id="top">
      ...
    </div>
    <div id="bottom">
        blub
    </div>
</div>

 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0;
}

#container{
    background-color: yellow;
    flex-direction: column;
    display: flex;
    height: 100%;
}

#top {
    background-color: red;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
        overflow: auto;
    white-space:pre;
}


#bottom {
    background-color: green;
    height: 4em;
}

---

(2) 嵌套的弹性盒

Fiddle

<div id="container">
    <div id="top">
        <div id="left">
        </div>
        <div id="right">
          ...
        </div>
    </div>
    <div id="bottom">
        blub
    </div>
</div>

 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0;
}

#container{
    background-color: yellow;
    flex-direction: column;
    display: flex;
    height: 100%;
}

#top {
    background-color: red;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}

#right {
    white-space: pre;
    overflow: auto;
    background-color: blue;
    width: 5em;
}

#left {
    flex-grow: 1;
    background-color: orange;
}

#bottom {
    background-color: green;
    height: 4em;
}

Answer 1

最新的浏览器将新的auto 实现为min-height 的初始值。

这迫使#top 至少与其内容一样高。

所以你需要撤消它：

#top {
  min-height: 0;
}

那么#top 可以比它的内容短。 #right 会被拉伸到和#top 一样高，#top 的内容可能会溢出。

html, body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0;
}
#container{
  background-color: yellow;
  flex-direction: column;
  display: flex;
  height: 100%;
}
#top {
  background-color: red;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
}
#right {
  white-space: pre;
  overflow: auto;
  background-color: blue;
  width: 5em;
}
#left {
  flex-grow: 1;
  background-color: orange;
}
#bottom {
  background-color: green;
  height: 4em;
}

<div id="container">
  <div id="top">
    <div id="left">
    </div>
    <div id="right">
      1
      1
      1
      1
      1
      1
      1
      1
      1
      1
      1
      11
      1
      1
      1
      1
      1
      1
      1
      1
      1
      1
      1
      1
      1
      1
    </div>
  </div>
  <div id="bottom">
    blub
  </div>
</div>

Answer 2

替代答案：只需在#top 上指定flex:1 而不是flex-grow:0。或指定flex-basis:0。 flex:1 隐式设置flex: 1 1 0，即第三个0 表示flex-basis:0。

这很重要，因为flex-basis 的默认初始值不是 0，而是auto，这实际上意味着content-sized，因此您需要求助于min-height。和 OP 一样，我发现 min-height 有点出人意料，有点令人困惑，而 flex 符号则不那么重要。

更新了sn-p：

http://codepen.io/yaaang/pen/gayqPE

From the spec:

[flex 中的第三个组件] 设置 flex-basis 长手并指定 flex 基础：弹性项目的初始主尺寸，在可用空间之前 根据弹性系数分配。它采用相同的值 width 属性（除了 auto 的处理方式不同）和 附加内容关键字。当从 flex 速记中省略时，它的 指定值为 0%。

如果指定的 flex-basis 是 auto，则使用 弹性基础是弹性项目主要尺寸的计算值 财产。如果该值本身是自动的，那么使用的弹性基础是 根据其内容自动确定（即大小为 内容）。