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>