flex-box: How do I create a column with two rows - If the content of both doesn't fit I want the upper row to take a maximum of 60%

Viewed 19

I'd like to create a 1 column, 2 row layout with the following rules :

  • If the contents of the Upper and Lower row fits within the container I want to show the entirety of both
  • If the contents exceeds that of the container, then I want the Upper row to take up 60% of the total height of the container, giving the Lower row the rest.

This is my attempt : https://playcode.io/959652/ - As you can see the Upper row is currently taking up whatever height it deems necessary leaving very little space for the lower row

edit: Since it wasn't clear from the original post: I'd like for the Upper row to take up more than 60% of the height in the event that the Lower row requires less than 40% and the upper row requires more than 60%

0 Answers
Related