当视图调整大小时，如何强制嵌套的flexbox元素收缩和显示滚动条？
当视图调整大小时，如何强制嵌套的flexbox元素收缩和显示滚动条？
提问于 2015-08-06 23:18:18
我正在使用flexbox构建一个布局，而且总体上相当简单。视图有三个部分:顶部有一个导航条，左边有一个侧边栏，还有一个内容区域可以填充剩余的空间。导航条有固定的高度，侧边栏有固定的宽度。
此外，侧边栏和内容区域应该单独滚动。如果边栏中的内容溢出，它应该创建一个特定于侧栏的滚动条。内容视图也是如此。重要的是，这意味着整个视图绝不能滚动:它应该保持静态(只有元素应该滚动)。
使用柔性盒构建此布局非常简单：
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#root {
display: flex;
height: 100%;
}
#frame {
display: flex;
flex: 1;
flex-direction: column;
}
#navigation-bar {
background-color: #bab;
display: flex;
height: 70px;
overflow: hidden;
}
#main {
display: flex;
flex: 1;
}
#left-bar {
background-color: #aaa;
overflow: auto;
width: 250px;
}
#content {
background-color: #ccc;
flex: 1;
}<div id="root">
<div id="frame">
<div id="navigation-bar">
<h1>Website Name</h1>
</div>
<div id="main">
<div id="left-bar">
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
</div>
<div id="content">
</div>
</div>
</div>
</div>
但是，请注意，侧栏不单独滚动。相反，整个视口展开并滚动。有趣的是，我想要实现的东西在没有嵌套的情况下正常工作--如果我删除导航条，侧边栏就会独立滚动。
如何防止柔性盒本身拉伸以包含其内容，以便显示特定于元素的滚动条，而不是视图的滚动条？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-08-07 00:00:43
添加以下内容：
#main {
min-height: 0;
flex: 1 1 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#root {
display: flex;
height: 100%;
}
#frame {
display: flex;
flex: 1;
flex-direction: column;
}
#navigation-bar {
background-color: #bab;
display: flex;
height: 70px;
overflow: hidden;
}
#main {
display: flex;
flex: 1 1 0;
min-height: 0;
}
#left-bar {
background-color: #aaa;
overflow: auto;
width: 250px;
}
#content {
background-color: #ccc;
flex: 1;
}<div id="root">
<div id="frame">
<div id="navigation-bar">
<h1>Website Name</h1>
</div>
<div id="main">
<div id="left-bar">
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
</div>
<div id="content"></div>
</div>
</div>
</div>
您需要min-height: 0，因为正如在我怎样才能得到FF，33.x，Flexbox在FF中的行为，34.x？中解释的那样，Flexbox模块更改了min-height的初始值。
4.5 Flex项的隐含最小大小 为了为挠曲物品提供更合理的默认最小大小，该规范引入了一个新的自动值，作为CSS2.1中定义的最小宽度和最小高度属性的初始值。
我还添加了flex: 1 1 0，因为flex: 1变成了flex: 1 1 0%，但是在列布局中，0%在Chrome上是个缺陷。但是0运行得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31867316
复制相关文章
相似问题
腾讯云开发者
