Не могу понять почему у меня при масштабировании страницы потомок распирает родителя так, что тот перестает доходить до конца страницы. Выглядит это так:
Я попробовал выложить код на https://jsfiddle.net/t7pvewLr/ но там оно не воспроизводится. Проще посмотреть на реального сайта.
Вот так объявлен центральный блок Central в который LeftSideContent и RightSide вписаны:
.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;
}
В чем причина? Как это исправить?