SOLVED: Wrapping columns with proportions?

How To
1

I’m probably missing something very basic here so I’m ready to facepalm, but:

I’ve got two columns in a container. I want them to be 70% and 30% of available space - but I also want them to wrap once the available space becomes too small.

How do I do that?

I can set their proportions either through max-width and through flex-grow 7/3 & flex-basis = 0, but the first one gives me warping elements that don’t fill their new available space, and the second one doesn’t wrap, ever. What am I missing?

TIA!

2

Actually you almost got it right.

You can use flex-grow 7 and 3 and it will put your columns in 70% and 30%.

Now, for the 2nd part, you have to define what “space too small” means for you. That’s when you use flex-basis.

For example if you use flex-basis of 500px on the first column, columns will stack when first column won’t have 500px available in those 70% of space.

Don’t forget to use flex-wrap: wrap on columns wrapper btw.

3

Worked like a charm, thanks!