Как ограничить высоту div по высоте соседнего?

Question

[Артем]

Доброго дня!
Есть следующая структура:

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

В левой колонке одна картинка
В правой вертикальный список из картинок

Нужно, чтобы левая колонка занимала 70% длины .parent, при этом в правой колонке, если высота становится больше левой колонке, появлялся скроллер

Ширину задал с помощью flex
Но список из картинок в правой колонке растягивает по высоте .parent и скроллера не появляется
Как можно ограничить высоту правой колонки по высоте левой?
Другими словами, как сделать, чтобы правая колонка не растягивала .parent по высоте

https://jsfiddle.net/9t2s7nox/

Answer 1

[WapSter]

Если явно не указывать в пх высоту родительского блока, то высота дочерних в % ничего не даёт. Чтобы появился скролл, нужно задать overflow-x/y: scroll или auto(в чем разница не могу вспомнить, что-то связанное с ie было, он вроде не делает блок прокручиваемым) и ограничить блок по высоте/ширине соответственно.

Comments

[Артем]

Если я укажу высоту родительского блока, я могу ограничить расширение левой колонки по ширине до тех пор, пока не будет достигнута максимальная высота?

[WapSter]

Артем, да. Height 100%

[Артем]

WapSter, в таком случае высота будет ограничена, но по ширине блок продолжит расти

[WapSter]

Артем, да

[Артем]

WapSter, а как запретить увеличение ширины, если максимальная высота достигнута?

[WapSter]

Артем, ну для твоего родительского блока ширина окна браузера или другого блока в которое он входит, свойство width ограничивает ширину.