One flex/grid item sets the size limit for siblings

by

Yes, it is possible. Leave the sibling setting the max height alone and set the others’ flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling’s height. No absolute positioning. No setting height on any elements.

main {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 7em;
  border: thin solid black;
  margin: 1em;
}

:not(.limiter)>div {
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}
<main>
  <section>
    <div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
      in flow text in flow text in flow text in flow text in flow text in flow text in</div>
  </section>

  <section class="limiter">
    <div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>

  <section>
    <div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
  </section>
</main>

More Related Contents:

  1. Why don’t flex items shrink past content size?
  2. Targeting flex items on the last or specific row
  3. Can’t scroll to top of flex item that is overflowing container
  4. Last margin / padding collapsing in flexbox / grid layout
  5. Equal height rows in a flex container
  6. Equal width flex items even after they wrap
  7. Equal height children of flex items
  8. How to center elements on the last row in CSS Grid?
  9. flex-grow not sizing flex items as expected
  10. How to specify line breaks in a multi-line flexbox layout?
  11. How to add 1px margin to a flex item that is flex: 0 0 25%?
  12. How can I combine flexbox and vertical scroll in a full-height app?
  13. Why isn’t object-fit working in flexbox?
  14. Keep the middle item centered when side items have different widths
  15. How can I make my flexbox layout take 100% vertical space?
  16. text-overflow is not working when using display:flex
  17. Is there a way to remove a div but keep its elements?
  18. Flexbox alternative for IE9
  19. Prevent flex items from stretching
  20. Flex items not respecting margins and box-sizing: border-box
  21. CSS grid – maximum number of columns without media queries
  22. Make flex items overlap
  23. 5 items per row, auto-resize items in flexbox
  24. Aligning elements left and center with flexbox
  25. Flexbox, z-index & position: static: Why isn’t it working?
  26. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  27. Different implementation of Flexbox in Firefox and Chrome
  28. Why does flex-box work with a div, but not a table?
  29. Make flex container take width of content, not width 100%
  30. justify-content: space-between failing to align elements as expected

Leave a Comment