<分区>
<分区>
我有一个基于 flex 的页面布局，我想将一个可滚动的元素 Pane 插入到 .main 容器中。但是 .scroller 不受父级限制。有没有办法让 overflow-x: auto 滚动条出现？
article {
display: flex;
max-width: 800px;
outline: 1px red solid;
}
.menu {
flex: 0 0 200px;
}
.main {
flex: 1 1 auto;
outline: 1px green solid;
}
.scroller {
display: flex;
flex: 0 0 auto;
flex-wrap: no-wrap;
overflow-x: auto;
}
.scroller li {
margin: 0 6px;
}
// other styles
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0;
padding: 0;
}<article>
<ul class="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<section class="main">
<h1>Page contents</h1>
<h2>Slideshow</h2>
<ul class="scroller">
<li><img src="https://dummyimage.com/300x200/000000/fff" /></li>
<li><img src="https://dummyimage.com/300x200/000000/fff" /></li>
<li><img src="https://dummyimage.com/300x200/000000/fff" /></li>
</ul>
</section>
</article>最佳答案
溢出-x:自动；需要继续 main，而不是 scroller
关于css - 包含 flex 滚动条的 flex 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55259639/