Scrolling a flexbox with overflowing content

by

I’ve spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with:

HTML:

<div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">Column 3</div>
    </div>
</div>

CSS:

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content; /* needs vendor prefixes */
}

Here are the pens:

  1. Short columns being stretched.
  2. Longer columns overflowing and scrolling.

The reason this works is because align-items: stretch doesn’t shrink its items if they have an intrinsic height, which is accomplished here by min-content.

More Related Contents:

  1. Fill remaining vertical space with CSS using display:flex
  2. What’s the difference between align-content and align-items?
  3. Create a Masonry grid with flexbox (or other CSS)
  4. Horizontal masonry layout with flexbox CSS only [duplicate]
  5. Bootstrap align navbar items to the right
  6. Aligning grid items across the entire row/column (like flex items can)
  7. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  8. How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]
  9. How can I make Flexbox children 100% height of their parent?
  10. Bootstrap 4 navbar with 2 rows
  11. What’s the difference between display:inline-flex and display:flex?
  12. How to prevent long words from breaking my div?
  13. A grid layout with responsive squares
  14. Bootstrap 4 masonry layout utilizing flexbox grid
  15. How to change flexbox wrap?
  16. css grid of squares with flexbox
  17. CSS flexbox not working in IE10
  18. Set flexbox children to have different heights to use up available space
  19. Height 100% on flexbox column child [duplicate]
  20. Prevent flex item from exceeding parent height and make scroll bar work
  21. How to make an inline-block element fill the remainder of the line?
  22. text-overflow ellipsis on flex child not working [duplicate]
  23. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  24. How can I change the order of Bootstrap columns?
  25. The difference between flex:1 and flex-grow:1
  26. How do I set distance between flexbox items?
  27. Difference between flex-end and end? [duplicate]
  28. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  29. CSS 100% height layout
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment