I can not understand why when I scale the page, the descendant is bursting with the parent so that it stops reaching the end of the page. It looks like this:

I tried to put the code on https://jsfiddle.net/t7pvewLr/ but there it is not reproduced. Easier to look at the real site .

This is how the central block of Central is declared in which LeftSideContent and RightSide are entered:

.MainContainer { height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; } .Central { display: flex; flex-direction: row; flex-grow: 1; } .LeftSide { background-color: #ddd0d1; flex-grow: 8; } .RightSide{ background-color: #965254; flex-grow: 1; }

What is the reason? How to fix it?

enter image description here

    1 answer 1

    The problem is here:

     .MainContainer { height: 100vh }

    And it's not about scaling, but overflowing the columns - when the content gets more than one viewport, it starts climbing out for the parent, and the parent does not increase.