我正在尝试创建一个布局,其中包含一些可能相当宽的内容,但只有页面的一部分(绿色区域)滚动。我有三列,最后一列垂直分成两列,底部需要能够滚动(其中的内容通常是大约 700 像素宽的表格)。请参阅https://codepen.io/simonh1000/pen/RVgOMo和下面的代码
正如您将看到的,第三列的顶部部分在我想要的时候没有换行,而底部部分没有显示滚动条来容纳故意宽的内容。 这就是我需要帮助
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: flex;
align-items: stretch;
overflow: hidden;
font-size: 28px;
padding: 0;
}
.first, .second {
padding: 15px;
flex: 0 0 150px;
}
.third {
flex: 1 1;
display: flex;
flex-direction: column;
}
.first {
background-color: #ee6;
}
.second {
background-color: #c66;
}
.top {
flex: 0 0 150px;
background-color: #27c;
}
.main {
flex: 1 1;
width: 700px;
background-color: #4c9;
overflow: auto;
padding: 15px;
}
<div class="container">
<div class="first">Fixed</div>
<div class="second">Fixed</div>
<div class="third">
<div class="top">Text here should wrap but does not</div>
<div class="main">
This section should scroll so that it can accommodate content that is rather wider than the space left on the screen.
</div>
</div>
</div>
最佳答案
您已为 main 类的元素设置了固定宽度。
.main {
...
width: 700px; /* this is the problem */
}
删除它,一切都会按预期工作。
Updated Codepen
关于css - Flexbox 布局中的滚动面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43752346/