<分区>
我有一个带有固定页眉、固定页脚、固定菜单和滚动内容的 flexbox 布局。
感谢一些文章和 SO 答案，我已经成功地使菜单和内容按预期垂直滚动。
现在，我只是找不到如何做同样的事情来使内容水平滚动。水平滚动条始终出现在正文级别。我试过在每个容器上强制设置一个宽度，但它不起作用。我预计 .layout-content-content div 上的 overflow: auto 会水平和垂直溢出，但 CSS 显然不是那么容易驯服的。
对应代码笔:https://codepen.io/cosmo0/pen/vaZbGL
html,
body,
.layout-container {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
.layout-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.header,
.footer {
height: 50px;
flex: 0 0 auto;
}
.layout-body {
flex: 1 1 auto;
display: flex;
}
.layout-menu {
flex: 0 0 auto;
width: 300px;
overflow: auto;
}
.layout-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.layout-content-title {
flex: 0 0 auto;
height: 50px;
}
.layout-content-content {
flex: 1 1 auto;
overflow: auto;
}
/* this is to simulate some large data table */
.large {
width: 10000px;
border: 1px solid #ccc;
}<div class="layout-container">
<div class="header">Header</div>
<div class="layout-body">
<div class="layout-menu">
<ul>
<li>Menu contents</li>
</ul>
</div>
<div class="layout-content">
<div class="layout-content-title">Page title</div>
<div class="layout-content-content">
<div class="large">This content is too large</div>
<p>Content content.</p>
</div>
</div>
</div>
<div class="footer">Footer </div>
</div>