css - CSS: flexbox 水平溢出

Question

怎么可能让 flexbox 容器的子项不拉伸但水平溢出？这样您就可以使用 overflow-x 滚动或剪切右侧的内容。

我的实验以水平拉伸的项目结束，尽管它们具有固定的宽度。

Answer 1

如果 flex-container 具有flex-wrap:no-wrap（默认），那么将其设置为overflow:auto;flex-items 为flex: 0 0 100%（或任何您想要的宽度而不是 100%）就足够了。

section{
  display:flex;
  width:100%;
  overflow:auto;
}

div{
  background-color:chartreuse;
  height:2rem;
  flex: 0 0 100%;
  box-sizing:border-box;
  border:5px solid red;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
</section>