How to stretch on the transverse axis on FlexBox?

Question

css

I have the layout shown in the picture, I can’t stretch the first block to the width,
how to do this on flexbox? For example, in the " Table " tag, there are attributes such as " colspan " " rowspan " that allow you to drag the table both in width and in height. And flexbox has only " flex-grow " which pulls the block only in width .. but what about the height?))
The task is not to select the first block separately in a div, but to make a similar scheme as in the picture, exactly according to the means for the given HTML code .
- Block width (from 2 to 7) 50% of the total container
- Block height is essentially floating (depending on content filling)
codepen.io/vasa666/pen/jymGMV

Answer 1

Basically { align-items: stretch; } this property is responsible for stretching the block by filling, different options are possible, try experimenting with align-items by setting different values ​​for it.

Answer 2

and what do you want? execution of your script does not slow down anything. those. It works until the RAM fails. and because of this speed of execution - it is clogged very quickly.
set a timeout of 1 second. then it won't slow down.