我在一个 div 中有 3 个元素。
它的容器需要是 100% 带有水平滚动条的小部件。
就像旋转木马一样。
.wrapper {
display: flex;
flex: 1 1 0;
overflow-x: scroll;
overflow-y: hidden;
}
.content {
display: flex;
width: 500px;
}
.item {
height: 200px;
width: 100px;
margin-right: 10px;
}
<div class='wrapper'>
<div class='content'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
结果:我希望元素水平移动并带有滚动条。
目前上面的代码破坏了我的 flex 布局。 我可以在没有 flex 的情况下轻松做到这一点,但我正在寻找一个 flex 解决方案。
最佳答案
flex 元素的 flex-shrink
默认为 1
,这允许它收缩,因为你的 item
也不会没有任何内容使它们保持一定的宽度,它们会。
将 flex-shrink: 0
添加到 item
的规则中,它们不会。
顺便说一句,由于 flex: 1 1 0;
设置在 wrapper
上,并且作为“flex item”属性,将仅适用于 wrapper
如果它的父级也有 display: flex
。
已更新
如果您使 content
显示 inline-flex
,就可以避免它的溢出,因为 inline 元素会随着其内容增长。
堆栈片段
.wrapper {
display: flex;
flex: 1 1 0;
overflow-x: scroll;
overflow-y: hidden;
}
.content {
display: inline-flex;
border: 2px dotted black;
}
.item {
height: 160px;
width: 250px;
flex-shrink: 0;
margin-right: 10px;
background: red;
}
<div class='wrapper'>
<div class='content'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
关于html - CSS Flex - 我有一个元素列表可能需要使它们水平滚动并 overflow hidden ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47490352/