The flex-grow: 9999; hack

sketch2_w_700

Imagine a flex container (display: flex) with two flex items in a row (flex-direction: row). Item A on the left, and item B on the right. I would like the flex items to be stacked on top of each other when necessary. Item B has to jump onto the second line, if there’s not enough space for it to be at least 20 ems wide.

Now comes the tricky part. I want item A to stretch to the entire width of the container, only if the items are wrapped into multiple lines.

The – clever! – trick to getting this working is to allow both items to flex-grow, but to give item B a ridiculously high value (viz. flex-grow: 9999;)

The flex-grow: 9999; hack →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.