> From flexbox 101 to flex-grow 9999

I love responsive design - making sure my app can scale across all screen sizes. But here's the thing: I also want to avoid media queries whenever possible. Why? Because breakpoint are too rigid, too "hardcoded".

---

Flexbox 101

So, the other day I had to place two DIVs next to each other - if they fit. And if they don't, then stack them on top of each other.

Easy: Apply display: flex and flex-wrap: wrap on their parent container.

Okay, now how to make sure they fill in the available room both when they are inline, and also when they are stacked?

Add flex-grow: 1 to both DIVs.

---

The trick:

So far, it's been Flexbox 101. But here comes the tricky part: I want DIV2 to expand as wide as it can, and shrink DIV1 to its minimum.

Removing flex-grow from DIV1 would solve this issue when the DIVs are in a row, but it would prohibit DIV1 from growing when they are stacked.

So what do we do?

Change flex-grow: 1 to flex-grow: 9999 on DIV2.

---

Now, the two DIVs behave as required:

• If they fit next to each other: they fill up the container's width, with DIV2 getting priority to take as much room as possible, shrinking DIV1 to its minimum width.
• If they don't fit in a row: the DIVs wrap under one another, and they each expand to the container's width.