如何使 flexbox 容器水平滚动

Question

我有这个 HTML 和 CSS

#container{
  border:1px solid red;
  display:flex;
  overflow:auto;
}
.item{
    border:1px solid green;
    margin:5px;
    width:700px;
}

<div id="container">
<div class="item">
  ...
</div>
<div class="item">
  ...
</div>
....
<!-- more items -->
</div>

.item 属性不会更改 width 的宽度。

如果我设置了 min-width on .item` 那么它就可以工作了。

.item{
    border:1px solid green;
    margin:5px;
    width:700px;
    min-width:300px;
}

是否有其他方法可以使 flex 容器可滚动？

检查笔 https://codepen.io/ats99/pen/JjEzRyV?editors=1100

Answer 1

将 flex-shrink: 0 添加到您的 flexbox 子项。它将阻止默认的 flexbox 行为，该行为试图通过挤压他们来适应您的孩子。

Answer 2

如果您想在不使用 min-width 的情况下产生相同的效果，那么您只需将 flex: 0 0 auto 应用于 .item。