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