CSS：flexbox水平溢出

Question

如何让儿童Flexbox容器的项目不伸展但水平溢出？这样你就可以使用overflow-x滚动或者剪切右边的内容。

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

Answer 1

如果flex容器有flex-wrap:no-wrap（默认值），则将其设置为overflow:auto;，将flex项设置为flex: 0 0 100%（或任何所需的宽度而不是100％）够了。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;