溢出：嵌套柔性盒自动 [英] overflow: auto in nested flexboxes

问题描述

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

只要我使用一个级别的弹性盒子（参见示例1），一切工作正常：只要其内容超出给定的空间，scrollbars应用于红色框（ #top ）。

然而，如果我介绍另一层flexboxes（参见示例二），蓝色的滚动条框（ #right ）。相反，滚动条出现在body元素上，完全忽略了蓝色框中的 overflow：auto 设置。

问题是：如何使用嵌套的弹性盒>

备注：我测试了Chrome45，Firefox 40和IE11。行为是一致的。

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

---

（1）只有一个flexbox，没有嵌套

小提琴

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

 

  html，body {
 width：100％; 
身高：100％; 
保证金：0; 
 padding：0; 
} 
 
 #container {
 background-color：yellow; 
 flex-direction：column; 
 display：flex; 
身高：100％; 
} 
 
 #top {
 background-color：red; 
 flex-grow：1; 
 display：flex; 
 flex-direction：row; 
溢出：auto; 
 white-space：pre; 
} 
 
 
 #bottom {
 background-color：green; 
身高：4em; 
 
 
 
 
 $ b （2）嵌套柔性盒> / strong> 
 
 
 
  小提琴  
 < 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％; 
身高：100％; 
保证金：0; 
 padding：0; 
} 
 
 #container {
 background-color：yellow; 
 flex-direction：column; 
 display：flex; 
身高：100％; 
} 
 
 #top {
 background-color：red; 
 flex-grow：1; 
 display：flex; 
 flex-direction：row; 
} 
 
 #right {
 white-space：pre; 
溢出：auto; 
 background-color：blue; 
 width：5em; 
} 
 
 #left {
 flex-grow：1; 
 background-color：orange; 
} 
 
 #bottom {
 background-color：green; 
身高：4em; 
 
 
 
 
 
解决方案
最新的浏览器实现了新的 auto 作为初始值 min-height 。
 
 
 
这迫使 #top 至少与其内容一样高。 
 
 
 
所以你需要取消：
 
 
  #top {
 min-height：0; 
 
  
然后 #top 可以比其内容短。  #right 将被拉伸到与 #top 一样高，的内容＃ 
 
 
 
 
 
 
 <，c $ c> html，body {width：100％;身高：100％保证金：0; padding：0;}＃container {background-color：yellow; flex-direction：column;显示：flex; height：100％;}＃top {background-color：red; flex-grow：1;显示：flex; flex-direction：row; min-height：0;}＃right {white-space：pre;溢出：自动;背景颜色：蓝色; 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 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1< / div> < / DIV> < div id =bottom> blub< / div>< / div>  

I'm currently experimenting with flexbox layouts and have a problem, that overflow wont get applied, when I nest multiple flexboxes.

As long as I just use one level of flex boxes (see example 1), everything works fine: As soon as its content exceed the given space, scrollbars are applied to the red box (#top).

If I, however, introduce another layer of flexboxes (see example two), there is no scrollbar on the blue box (#right). Instead the scrollbars appear on the body element completely ignoring the overflow: auto setting on the blue box.

So my question is: How can I get overflow to work when using nested flexboxes?

Remark: I tested this with Chrome45, Firefox 40 and IE11. The behavior is consistent across all.

Below is the code as well as a fiddle link for both cases.

---

(1) Just one flexbox, no nesting

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) nested flexboxes

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;
}

解决方案

Latest browsers implement the new auto as the initial value of min-height.

That forces #top to be at least as tall as its content.

So you need to undo that:

#top {
  min-height: 0;
}

Then #top can be shorter than its content. #right will be stretched to be as tall as #top, and the content of #top might overflow.

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>

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