CSS: flexbox horizontal overflow

Question

How is it possible to let children items of a flexbox container not stretch but overflow horizontally? So that you can either scroll with overflow-x or cut the content on the right side.

My experiments ended with horizontally stretched items although they have a fixed width.

What have you tried so far ? Please show some code. – c69 Jan 13 '18 at 11:09 — c69, Jan 13 '18 at 11:09

score 12 · Accepted Answer · answered Jan 13 '18 at 11:14

12

If the flex-container has flex-wrap:no-wrap (default), then setting it to overflow:auto; and the flex-items to flex: 0 0 100% (or whatever your desired width instead of 100%) should be enough.

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>

answered Jan 13 '18 at 11:14

Facundo Corradini

3,825
9
24

@TemaniAfif you're totally right, I'll keep that in mind. – Facundo Corradini Jan 13 '18 at 11:44
2

Wow, very interesting why it works only with `flex-shrink: 0;`. Spent some time until found your answer. Thnk you! – Disorder Mar 26 '19 at 15:47

CSS: flexbox horizontal overflow

1 Answers1