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>

CSS: flexbox水平溢出

CSS: flexbox horizontal overflow

css

horizontal-scrolling

stretched

flexbox