Resizable Function For Flexbox Row Height Using Vanilla Javascript Causes View In Row Below To Change Size

I have 3 row divs in a flexbox container, each row div contains at least 1 view. I added a resize handle for the height of row1 and row2 in blue. It resizes the height of row1 corr

Solution 1:

Because on start, none of the row have a flex basis (so they are at 0).

With basic flex grox (1 for each), they will grow to 33%.

When you set flex-basis for r1 and r2 to 150px, You have:

• r1: basis 150px + grow
• r2: basis 150px + grow
• r3: basis 0 + grow

So the r3 collapse to take (100% - 300px) / 3 instead of 33%.

Basically, the problem is the mix of flex-grow/flex-shrink which are made for automatic size calculation and fixed sizes. You should do everything in fixed sizes