CSS: горизонтальное переполнение flexbox

Question

Как можно, чтобы дочерние элементы контейнера flexbox не растягивались, а переполнялись горизонтально? Так что вы можете либо прокрутить с помощью overflow-x, либо вырезать содержимое с правой стороны.

Мои эксперименты закончились с горизонтально растянутыми предметами, хотя они имеют фиксированную ширину.

Answer 1

Если флекс-контейнер имеет flex-wrap:no-wrap (по умолчанию), затем установите его overflow:auto; и flex-предметы для 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>