<style> .scrolling-child { flex-grow: 1; /* Necessary */ flex-shrink: 1; /* Necessary */ flex-basis: auto; /* Necessary */ overflow-y: auto; /* Necessary */ height: 0px; /* The trick */ } </style> <div class='scrolling-child'> ...Lots of content... </div>
Programming Tips - Flexbox: scrolling child with unknown height
Date: 2020jun17
Platform: web
Keywords: css
Q. Flexbox: scrolling child with unknown height
A. The trick is to specify `height: 0px`
If you knew the height it would be easy to code `height: 300px` or whatever.
But that defeats the whole purpose of flexboxes.
`height: 100%` doesn't work either.
But height zero does.
And of course, you need `overflow-y: auto` or `overflow-y: scroll`