Search code examples
cssflexboxhorizontal-scrollingstretched

CSS: flexbox horizontal overflow

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.

enter image description here

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

Solution

  • 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>