0

Не могу понять почему у меня при масштабировании страницы потомок распирает родителя так, что тот перестает доходить до конца страницы. Выглядит это так:

Я попробовал выложить код на 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;
}

В чем причина? Как это исправить?

введите сюда описание изображения

1 ответ 1

0

Проблема тут:

.MainContainer { height: 100vh }

И дело не в масштабировании, а в переполнении колонок — когда контента становится больше, чем на один вьюпорт, он начинает вылазить за родителя, а сам родитель не увеличивается.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.