Hi: I have the following problem:
I have this vertical flexbox which should be able to be resized by adding space between the items, but only up to a certain point.
It has
.my-flexbox{ margin-top: auto; margin-bottom: auto; height: fit-content;}So the spacing between items should be at least 1em, and at most 2em. After that point, if more space needs to be filled, it should use the margins (which are set to auto) instead
So basically it should have (and its max-height
The only solution I am seeing right now is to add "spacing divs":
.my-flexbox>*{ flex-grow: 0;}.my-flexbox>:not(:first-child)::after{ content: ''; min-width: 1em; max-width: 2em; flex-grow: 1;}But I was wondering if there was a more elegant solution
EDIT: Here is a minimal reproducible example html:
<html><body><div id="container" style="height:100%;display:flex-column;"><div id="other_stuff" style="height:2cm"></div><ul class="my-flexbox"><li> . . . </li><li> . . . </li><li> . . . </li></ul></div> </body></html> Expected behaviour when the container's height grows (eg when the window's height is changed)
- the spacing between the
li's grow until it reaches2em - The spacing around
.my-flexboxgrows