0

I could write up a long wall of text to describe what I am trying to achieve with some of my flexbox elements, but I thought an image would be worth more than a thousand words. (See the picture below.)

Currently I have three elements two smaller and one slightly larger one in a row. Flexbox does it's wonder here, keeping them an equal height and scaling them accordingly.

But, now I want to stack the two smaller elements and have the remaining element basically float right of them, matching the height the two smaller ones fill.

Is it possible to achieve this with flexbox, or should I just manually apply styling till I get the desired result?

Flexbox current result and desired result

Arndroid
  • 314
  • 3
  • 13
  • you can have more than 1 flexbox container. And you can have flexbox children that are also flexbox themselves. – zgood Sep 14 '20 at 19:35
  • grid *(or maybe table display for older browser)* would make it easier , flex will require a set height to wrap the 3 rd into another column :( – G-Cyrillus Sep 14 '20 at 19:38
  • table/grid example : https://jsfiddle.net/fmhwu7nb/1/ the solid one to choose ? : the grid. – G-Cyrillus Sep 14 '20 at 19:50

0 Answers0