第 1 列
第 1 列
第 1 列
页眉。内容列如下。
滚动内容溢出的弹性框
https://i.stack.imgur.com/LzsBQ.png
Here's the code 我用来实现上述布局：
.header { 高度：50px; } .body { 位置：绝对；顶部：50px；右：0；底部：0；左：0；显示：弯曲； } .sidebar { 宽度：140px; } .main { 弹性：1；显示：弯曲；弹性方向：列； } .content { 弹性：1；显示：弯曲； } .column { 填充：20px;右边框：1px 实心 #999; }
主标题
我省略了用于样式的代码。您可以在 the pen 中查看所有内容。
上面的方法有效，但是当 content 区域的内容溢出时，它会使整个页面滚动。我只希望内容区域本身滚动，所以 I added overflow: auto to the content div。
现在的问题是列本身不会超出其父母的高度，因此边界也被切断了那里。
Here's the pen showing the scrolling issue。
如何将 content 区域设置为独立滚动，同时使其子项超出 content 框的高度？
K
K-Gun
我已经和 Tab Atkins（flexbox 规范的作者）谈过这个问题，这就是我们想出的：
HTML：
<div class="content">
<div class="box">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>
CSS：
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
display: flex;
min-height: min-content; /* needs vendor prefixes */
}
以下是钢笔：
短柱被拉伸。较长的列溢出和滚动。
这样做的原因是，如果 align-items: stretch 具有固有高度，则不会缩小其项目，这在此处由 min-content 完成。
通常，当父母的身高不取决于其孩子时，它们就会起作用，这里就是这种情况。 min-height: 100% 确实可以解决您在 Firefox 中的拉伸甚至列短问题（尽管在 Chrome 中没有）。不确定这是 Chrome 错误还是 Firefox 错误。
请注意，Firefox 目前只支持宽度值的“最小内容”，而不是高度值——所以这在 Firefox 中不起作用，如果这对你很重要的话。 （参见例如 bugzilla.mozilla.org/show_bug.cgi?id=852367 ）
@dholbert - 这些笔的问题在于它们是公开的，所以任何人都可以更换它们。我取得了他们的所有权，所以你去吧：codepen.io/JosephSilber/pen/pmyHh
是的，这在 IE11 中被破坏了
但也指出下面的 stackoverflow.com/a/35609992/740553 可能是一个好主意，因为对于所有那些不是这样的情况，这是一个可靠的解决方案（尽管如果有人知道它为什么有效，因为“这里是CSS/Flex 规范的一部分导致这是真的”解释，所有 SO 和更广泛的网络开发世界仍然会从一个中受益 =)
g
geon
经过大量的反复试验，我刚刚非常优雅地解决了这个问题。
查看我的博文：http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
基本上，要使 flexbox 单元格可滚动，您必须设置其所有 父级 overflow: hidden;，否则它将忽略您的溢出设置并让父级变大。
这也适用于我的情况，但是哇，我真的很想看到它为什么起作用的解释。大多数时候，我发现 CSS 规范对于这种事情是完全不可理解的。
从您的博客文章中：“我不知道为什么会这样，而且规格也没有说明”。所以，我正在寻找它为什么起作用的解释。我已经浏览了规格，但正如你所说，没有什么可以跳出来。
再想一想，觉得还是有道理的。默认行为是每个 div 展开以包含它的所有子节点，因此不会有任何溢出来隐藏在叶节点处。您需要强制 overflow:hidden 从 DOM 的顶部一直隐藏，因此在您到达要溢出和滚动的节点之前，没有父级有机会容纳它的子级。
我不确定这是否真的能解释它。在元素上将溢出设置为隐藏并不会阻止它扩展以包含其所有子元素，AFAIK。根据 MDN：“overflow 属性指定在溢出其块级容器时是否剪切内容、呈现滚动条或仅显示内容。”此外，将溢出设置为可见以外的任何内容都会创建一个新的块格式化上下文 - 但这不相关，因为 flex 容器已经创建了自己的块格式化上下文：developer.mozilla.org/en-US/docs/Web/Guide/CSS/…。
我找到了技术原因 here，然后是 officially here (CSS spec)。基本上，更改溢出会更改最小高度自动值。尝试将
overflow hidden 替换为 overflow auto 或 min height 0。一切都应该仍然有效，并且应该首选后者（或者至少我在阅读规范后理解）。
A
Aakash
工作位置：绝对；连同弹性：
用 position: relative 定位弹性项目。然后在其中添加另一个 <div> 元素：
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
这会将元素扩展到其相对定位的父元素的边界，但不允许扩展它。在内部，overflow: auto; 将按预期工作。
.all-0 { 顶部：0；底部：0；左：0；右：0； } p { 文本对齐：对齐； } .bottom-0 { 底部：0; } .overflow-auto { 溢出：自动； }
标题 1
与流行的看法相反，Lorem Ipsum 不仅仅是随机文本。它起源于公元前 45 年的一部古典拉丁文学作品，距今已有 2000 多年的历史...
标题 1
与流行的看法相反，Lorem Ipsum 不仅仅是随机文本。它源于公元前 45 年的一部古典拉丁文学作品，距今已有 2000 多年的历史......
标题 1
与流行的看法相反，Lorem Ipsum 不仅仅是随机文本.它起源于公元前 45 年的一部古典拉丁文学作品，距今已有 2000 多年的历史...
标题 1
与流行的看法相反，Lorem Ipsum 不仅仅是随机文本。它源于公元前 45 年的一部古典拉丁文学作品，距今已有 2000 多年的历史...
标题 1
与流行的看法相反，Lorem Ipsum 不仅仅是随机文本。它起源于公元前 45 年的一部古典拉丁文学作品，距今已有 2000 多年的历史......
社交侧边栏...
顶级糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halva 水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。 opping 糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halva 水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。 opping 糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halva 水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。顶级糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halva 水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。 opping 糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halva 水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。 opping 糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halva 水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。 Halvafruitcake冰淇淋巧克力棒。熊爪冰淇淋巧克力棒甜甜圈甜馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。哈尔瓦
https://i.stack.imgur.com/JRlS8.png
如果内部组件设置了填充，则此解决方案特别有用，因为它将很好地将其锁定在您想要的任何位置。这要简单得多。 （是的，您可以改为设置
box-sizing: border-box，但对于某些第三方控件，这可能会更复杂）。
T
TylerH
有点晚了，但这可能会有所帮助：http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
基本上，您需要将 html、body 放入 height: 100%; 并将所有内容包装到 <div class="wrap"> <!-- content --> </div>
CSS：
html, body {
height: 100%;
}
.wrap {
height: 100vh;
display: flex;
}
使用“height: 100vh”时应该非常小心，因为它在 iOS Safari 和 Android 中的测量方式不同。一种考虑 URL 栏的高度，另一种则不考虑。
这仅在您要滚动的内容是屏幕的全高时才有效。如果您添加（例如）标题 div，您将返回到正方形
C
Chris Janicki
以下以粗体显示的 CSS 更改（加上列中的一堆内容以测试滚动）将起作用。好吧，它使每个内容列都可以单独滚动，这可能比最初要求的更多（更好？）。无论如何，请参阅 this Pen 中的结果。
.content { 弹性：1；显示：弯曲；高度：1px； } .column { 填充：20px;右边框：1px 实心 #999;溢出：自动； }
这里的技巧似乎是，可滚动面板需要在某处（在本例中，通过其父级）按字面意思设置 height，不 仅由 flexbox 确定。所以即使 height: 1px 也有效。 flex-grow:1 仍将调整面板的大小以适合。
a
amoebe
添加这个：
align-items: flex-start;
.content {} 的规则。至少（在 Firefox 和 Chrome 中），这对我来说是在你的笔中修复的。
默认情况下，.content 具有 align-items: stretch，这使得它根据 http://dev.w3.org/csswg/css-flexbox/#algo-stretch 调整其所有自动高度子项的大小以匹配其自身的高度。相反，值 flex-start 让孩子们计算自己的高度，并在其起始边缘对齐自己（并溢出，并触发滚动条）。
此外，列将不再等高，这是 flexbox 的主要吸引力之一。
好的。我不清楚这是一个设计约束——抱歉。
S
Seph Reed
我在任何地方都没有看到这个答案。但我需要的技巧是确保这些项目有一个 flex-shrink: 0;否则他们会被挤压。
.container { 显示：弹性；溢出：自动 } .container > * { flex-shrink: 0;宽度：10em；高度：10em；背景：线性渐变（右下角，#F0F，#0FF）； }
太感谢了。我有一个在所有 flex 容器上使用
min-height: 0 的布局，以允许子级可滚动。这导致一些东西缩小和重叠，但你的 .container > * 东西修复了它
L
Liam
我遇到的一个问题是，要有一个滚动条，一个元素需要指定一个高度（而不是一个 %）。
诀窍是在每列中嵌套另一组 div，并使用 flex-direction: column 将列父级的显示设置为 flex。
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
overflow-y: hidden;
overflow-x: hidden;
color: white;
}
.base-container {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
height: 100%;
overflow-y: hidden;
align-items: stretch;
}
.title {
flex: 0 0 50px;
color: black;
}
.container {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.container .header {
flex: 0 0 50px;
background-color: red;
}
.container .body {
flex: 1 1 auto;
display: flex;
flex-direction: row;
}
.container .body .left {
display: flex;
flex-direction: column;
flex: 0 0 80px;
background-color: blue;
}
.container .body .left .content,
.container .body .main .content,
.container .body .right .content {
flex: 1 1 auto;
overflow-y: auto;
height: 100px;
}
.container .body .main .content.noscrollbar {
overflow-y: hidden;
}
.container .body .main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
background-color: green;
}
.container .body .right {
display: flex;
flex-direction: column;
flex: 0 0 300px;
background-color: yellow;
color: black;
}
.test {
margin: 5px 5px;
border: 1px solid white;
height: calc(100% - 10px);
}
</style>
这是html：
<div class="base-container">
<div class="title">
Title
</div>
<div class="container">
<div class="header">
Header
</div>
<div class="body">
<div class="left">
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
</div>
<div class="main">
<div class="content noscrollbar">
<div class="test">Test</div>
</div>
</div>
<div class="right">
<div class="content">
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>Right</div>
<div>End</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/LiamFlavelle/czpjdfr4/
D
Dognose
这个问题的解决方案只是将 overflow: auto; 添加到 .content 以使内容包装器可滚动。
此外，还会出现与 Flexbox 包装器和 overflowed 类似 codepen 的可滚动内容一起出现的情况。
解决方案是将 overflow: hidden (or auto); 添加到包装器的父级（使用溢出：auto; 设置）围绕大型内容。
z
zhishaofei3
.list-wrap {
width: 355px;
height: 100%;
position: relative;
.list {
position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;
width: 100%;
}
}
L
Liam
< div class="flex flex-row flex-auto min-h-0">
我尝试了很多上面的答案，但没有太多喜悦。我怀疑这些答案中有很多已经过时或不符合我的要求。我的问题的答案来自 a related question：
Flex 项目的自动最小尺寸 你遇到了一个 flexbox 默认设置。弹性项目不能小于其内容沿主轴的大小。
因此，阻止我的弹性框项目滚动的是元素的大小会根据内容自动调整为 auto，然后调整大小，而不是滚动。这是一个完全可用的现代示例（使用 tailwind）：
标题
领导力本身很重要，它会被adipiscing的开发者所追求。 Pellentesque feugiat libero 该元素的目标。这是理所当然的事情。直到他抚平柔软地面的韵律。埃涅阿斯总是怀着箭。这是一个痛苦的屁股。 Fusce sagittis lectus et eleifend imperdiet。为孩子们准备的 Curabiculis rutrum。 Fusce 和怀孕的爱欲。因为前庭是一个箭袋，但并不总是酵母。病态的痛苦骨灰盒，会根据玩家的需要，价格不同。聊了一会儿，读起来像卡通片，痛得有点怀孕了，也没说我的扳机。 Curabitur luctus ligula diam，但各种医疗车辆。随着时间的推移为车辆融资。我需要担心这种疾病。即使是沙拉弓的酱汁，也不是 dignissim mi ultricies as。 Fusce faucibus sem 或 laoreet facilisis。没有生命之网这样的东西。即使作为生命的解药，它有时也会导致仇恨。但根据 CNN 的宣传，这是一项政策，一项政策，而不是一项政策。但在基础上没有一层又一层。莫里斯的权杖，对权杖的元素的憎恨，悲痛之湖，让它成为这本书的巨大代价，却是免费的。 Curabitur ullamcorper turpis now, 一个 eleifend urn venenatis ac Vivamus consectetur，现在是 quis easisis 车辆，risus ligula ligula finbus 弓，在 vulputate ex dui lobortis dolor。 Maecenas tincidunt, lacus et vehicules pulvinar, for sem venenatis, nec fringilla eros felis quis mauris。一家人的哀悼和欢笑是欢笑的源泉。有时他想成为一名房地产经纪人。谁是守门人？儿童与疾病、老年和儿童生活在一起，他们正在遭受饥饿和贫困的折磨。现在的标的，湖水作为一种金融资产，正如预期的那样，价格只是不一样。前庭和玩家不是真实的，它是真实的，但它是毒床。每个人都是伟大的而不是纯粹的卡通人物，但他们是明智的。每个人都有那种温暖的微笑，不仅仅是门廊。直到 ultrices，谁是搬运工，不要把 tortor viverra。 Aenean 迈出了 vulputate 的第一步。 Morbi tincidunt 想要一个孕妇和巧克力大卡车。一些沙拉，一份饮料，一份软蛋白棒。智能手机它不是熔断器；即使是员工和仇恨也没有打扰。而当兽人出生时，山上会生出羽毛和巨箭，还会生出一只可笑的老鼠。对欧盟亨德利特的恐惧过程的现场故事。 Vestibulum ultrices, leo eget et consectetur time, 如果不是 diam maximus orci, be amet ultricies leo mauris vitae eros。每个人都不需要大局观，这很重要。没有人，只有一名下士。那是一个周末。网络是在网格开始之前创建的。直到那弧线的尽头，那一刻的尽头，球员们。而当兽人出生时，山上会生出羽毛和巨箭，还会生出一只可笑的老鼠。对于 ligula feugiat lobortis，放置卡车是为了中和宓元、各种瓮甲、碟瓮。但是没有大量的哀悼，谁是足球的明智元素。狮子微笑的前庭，化妆和末端，箭头和叶舌。没有 hendrerit mattis eleifend。 Sed egestas lectus eu vulputate malesuada.
患者遵循训练计划很重要。 Pellentesque feugiat libero 该元素的目标。这是理所当然的事情。直到他抚平柔软地面的韵律。埃涅阿斯总是怀着箭。这是一个痛苦的屁股。 Fusce sagittis lectus et eleifend imperdiet。为孩子们准备的 Curabiculis rutrum。 Fusce 和怀孕的爱欲。因为前庭是一个箭袋，但并不总是酵母。病态的痛苦骨灰盒，会根据玩家的需要，价格不同。聊了一会儿，读起来像卡通片，痛得有点怀孕了，也没说我的扳机。 Curabitur luctus ligula diam，但各种医疗车辆。随着时间的推移为车辆融资。我需要担心这种疾病。即使是沙拉弓的酱汁，也不是 dignissim mi ultricies as。 Fusce faucibus sem 或 laoreet facilisis。没有生命之网这样的东西。即使作为生命的解药，它有时也会导致仇恨。但根据 CNN 的宣传，这是一项政策，一项政策，而不是一项政策。但在基础上没有一层又一层。莫里斯的权杖，对权杖的元素的憎恨，悲痛之湖，让它成为这本书的巨大代价，却是免费的。 Curabitur ullamcorper turpis now, 一个 eleifend urn venenatis ac Vivamus consectetur，现在是 quis easisis 车辆，risus ligula ligula finbus 弓，在 vulputate ex dui lobortis dolor。 Maecenas tincidunt, lacus et vehicules pulvinar, for sem venenatis, nec fringilla eros felis quis mauris。一家人的哀悼和欢笑是欢笑的源泉。有时他想成为一名房地产经纪人。谁是守门人？儿童与疾病、老年和儿童生活在一起，他们正在遭受饥饿和贫困的折磨。现在的标的，湖水作为一种金融资产，正如预期的那样，价格只是不一样。前庭和玩家不是真实的，它是真实的，但它是毒床。每个人都是伟大的而不是纯粹的卡通人物，但他们是明智的。每个人都有那种温暖的微笑，不仅仅是门廊。直到 ultrices，谁是搬运工，不要把 tortor viverra。 Aenean 迈出了 vulputate 的第一步。 Morbi tincidunt 想要一个孕妇和巧克力大卡车。一些沙拉，一份饮料，一份软蛋白棒。智能手机它不是熔断器；即使是员工和仇恨也没有打扰。而当兽人出生时，山上会生出羽毛和巨箭，还会生出一只可笑的老鼠。对欧盟亨德利特的恐惧过程的现场故事。 Vestibulum ultrices, leo eget et consectetur time, 如果不是 diam maximus orci, be amet ultricies leo mauris vitae eros。每个人都不需要大局观，这很重要。没有人，只有一名下士。那是一个周末。网络是在网格开始之前创建的。直到那弧线的尽头，那一刻的尽头，球员们。而当兽人出生时，山上会生出羽毛和巨箭，还会生出一只可笑的老鼠。对于 ligula feugiat lobortis，放置卡车是为了中和宓元、各种瓮甲、碟瓮。但是没有大量的哀悼，谁是足球的明智元素。狮子微笑的前庭，化妆和末端，箭头和叶舌。没有 hendrerit mattis eleifend。但是需要阅读eu vulputate malesuada。
https://i.stack.imgur.com/AzXx3.png
