时间戳

首页 > 解决方案 > 如何使 flexbox 容器水平滚动

html - 如何使 flexbox 容器水平滚动

问题描述

我有这个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

标签： htmlcssflexbox

解决方案

如果你想在不使用的情况下做出同样的效果，min-width那么你可以flex: 0 0 auto申请.item.

推荐阅读