Как заставить родительский DIV растянуться на нужную высоту?

Question

[Error 502]

Есть родительский DIV, два внутренних дочерних и в одном из дочерних много контента. Оба делят позицию по оси X и растянуты на всю высоту. Родительский DIV в свою очередь должен иметь минимальную высоту, равную высоте экрана. Короче вот упрощенный код:
HTML:

<div class="parent">
      <div class="child-1"></div>
      <div class="child-2">
            Тут очень много контента в виде текста, картинок и т.д.
      </div>
</div>

CSS:

.parent {
      position: relative;
      min-height: 100vh;
}

.child-1 {
      position: absolute;
      left: 0;
      height: 100%;
      width: 15%;
}

.child-2 {
      position: absolute;
      left: 15%;
      height: 100%;
      width: 85%;
}

Итак проблема в том, что часть контента из второго блока уходит за границу элемента вниз, хотя я рассчитывал на то, что родительский блок вместе с первым дочерним растянутся на необходимую высоту. Что и как сделать?
P.S. Чую что решение крайне простое, но все же не могу разобраться сам)))

Answer 1

[Алексей]

У вас дочерние блоки “выпали” из потока, т.к имеют абсолютное позиционирование. Стоит детальнее изучить различия между static, relative , absolute. Что касается задачи - нужно дочерним блокам присвоить float: left

Answer 2

[Тамерлан Годжиев]

Я бы попробовал сделать родителя фиксированным, а child-2 задать overflow-y: scroll

Comments

[Error 502]

скроллинг может и сработает, но сам по себе туда не подойдет(

[Тамерлан Годжиев]

А контент просто текст?

[Error 502]

Тамерлан Коченов, текст, картинки, видео.

[Bondi]

правильно подсказывают - уберите абсолютное позиционирование( position: absolute;).

Задайте родителю display: flex; и задайте нужный align-items что бы манипулировать контентом по оси У

рекомендую ознакомиться Свойство align-items

[Error 502]

Bondi, я как раз и решал эту проблему с помощью display: flex и align-items: stretch до поры до времени. но ситуация там гораздо сложнее. дело в том, что элементов .child-2 там на самом деле много и у каждого свое содержание и заставка. но видимый только один из них - тот, который был выбран при нажатии на кнопку внутри .child-1. появление и исчезновение блоков я выполнял с помощью show/hide через JQ. но теперь меня просят, чтобы эти блоки переключались плавно, т.е. манипулируя прозрачностью. когда я попробовал использовать fadeIn/fadeOut - у меня в процессе такой анимации сбоку появлялся третий видимый блок и только по окончанию анимации он вставал на место. т.е. в процессе анимации сразу два переключаемых элемента становятся видимыми, но меняется только прозрачность. а мне нужно, чтобы они сохраняли позицию, накладываясь друг на друга. ну надеюсь вы поняли)
p.s. я сейчас сделал так, что в момент нажатия кнопки элементам через .css() присваивается position: absolute, а после окончания анимации возвращается в initial. не знаю насколько это правильно. заставка в момент переключения слегка подглючивает из-за изменения размера блока, хотя не совсем заметно.

[Bondi]

Error 502, а есть ссылка на код? мб у вас это добро на сервере и по ссылке можно посмотреть, о чем речь?

Answer 3

[Юрий]

Почему вы используете абсолютное позиционирование?