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

Question

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

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

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

所以我的问题是：使用嵌套 flexbox 时如何overflow开始工作？

备注：我用 Chrome45、Firefox 40 和 IE11 对此进行了测试。该行为在所有方面都是一致的。

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

---

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

小提琴

<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) 嵌套的弹性盒

小提琴

<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

最新的浏览器将 newauto作为 的初始值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>