问溢出:嵌套的柔性盒中的auto
EN

Stack Overflow用户

提问于 2015-06-18 06:51:34

回答 2查看 962关注 0票数 3

目前，我正在试验柔性盒布局，当我嵌套多个柔性盒时，overflow不会被应用，这有一个问题。

只要我只使用一个级别的flex框(参见示例1)，一切都正常:一旦其内容超过给定的空间，滚动条就会应用到红色框(#top)上。

但是，如果我介绍另一层柔性盒(参见示例2)，蓝色框(#right)上没有滚动条。相反，滚动条出现在主体元素上，完全忽略了蓝色框上的overflow: auto设置。

因此，我的问题是:当使用嵌套的柔性盒时，如何让overflow 工作？

备注:我用Chrome45、Firefox40和IE11进行了测试。这种行为在所有方面都是一致的。

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

(1)只有一个柔性盒，没有嵌套的

小提琴

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

css

html

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-06-18 07:20:31

最新的浏览器将新的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>

票数 5

Stack Overflow用户

发布于 2015-11-22 12:21:32

flex:1替代答案:只需在#top.上指定而不是 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表示法则不那么令人困惑。

更新片段：

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

从规范中

flex中的第三个组件设置了flex基长，并指定了flex基:在根据flex因子分配空闲空间之前，flex项的初始主尺寸。它接受与width属性相同的值(除非auto被不同的对待)和一个附加的content关键字。如果从flex速记中省略，其指定值为0%。 如果指定的flex-basis是auto，则使用的flex基是flex项的main size属性的计算值。如果该值本身是自动的，那么使用的flex将根据其内容(即内容大小)自动确定。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30918777

复制

位、字节、字的区别

bit byte word 二进制计算机

字（Word）代表计算机处理指令或数据的二进制数位数，是计算机进行数据存储和数据处理的运算的单位。

Lokinli

2023/03/09

6740

原子操作和互斥锁的区别