I’m trying to build a responsive / fluid header that mimics flex wrap, pushing elements down, when not enough space. Simple enough, but when I have several nested items also reacting, I don’t know how to control what order things collapse. I want the largest parents to dropdown first, before their children start reacting.
I’ve attached a quick screen recording to show how resizing the element results in something different than the desired state in the two static examples below it.
I’ve tried to solve this with some min-widths, or setting some elements to hug instead of fill. But this just results in elements overflowing their container instead of wrapping as intended.