跟随 this回答，我正在尝试为我的内容创建一个完美的高度，但是内容高度溢出而不是滚动内容。 我为这种情况创建了一个 fiddle 。请帮助我修复我的内容高度，使顶部内容始终可见且可向下滚动。
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
justify-content: center;
align-items: center;
}
.data {
width: 80%;
min-height: 400px;
}
.box .row.footer {
flex: 0 1 40px;
}
HTML。
<head>
<link href="./test.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="row header">
<p>
<b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="data">
invisible box1
</div>
<div class="data">
visible box2
</div>
<div class="data">
visible box3
</div>
<p>
<b>Bottom Box is visible with scroll.</b> (fills remaining space)
</p>
</div>
<div class="row footer">
<p>
<b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>
最佳答案
您遇到的问题是由 .box .row.content 规则中的 justify-content: center 引起的。
删除它，您的文本将正确溢出。
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
/*justify-content: center; removed */
align-items: center;
}
这是 justify-content: center 的默认行为，在 flex 列容器中，当内容溢出时，它会在其顶部和底部溢出。
在此处阅读更多信息，您可以在此处找到资源和解决方法:
关于html - 如何使用 flex css 固定高度 div 中的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48462423/