Как ограничить блок по высоте, что бы появлялась прокрутка, не задавая ему фиксированную высоту?

Question

[Андрей]

Имеется такая структура: кодпен
Сам блок (.main-wrap) должен быть динамическим по высоте. максимальная высота 80%.
В списке айтемов может быть как 1, так и много айтемов.

Необходимо сделать что бы при большом количестве айтемов у родителя (.items) появлялась прокрутка.

В структуре можно добавлять обертки, если это необходимо, так же можно использовать флексбоксы и гриды.

Comments

[HamSter]

Определитесь, что должно ограничивать "много" items. Все равно какая-то высота какого-то родителя должна ограничивать или тогда через js: если items > 10, то родителю добавить overflow: scroll

[Андрей]

HamSter, не обязательно. Проблема решена.
Высота телефона не статична по высоте. блок тайтл и футер так же не статичны. количество айтемов динамическое. Да и зачем js, если можно без него?

[HamSter]

Андрей, =) в вашем же решении и есть упор в высоту - 80% от высоты .phone

[Андрей]

HamSter, тут да, но я не буду знать высоту .phone на реальных устройствах. Но теперь это и не важно. Немного изменил код, проверьте сами. высота не важна.

Answer 1

[Андрей]

Решение

Answer 2

[Steppp]

Так ?

Comments

[Андрей]

скролл нужен только у родителя айтемов. блок .items. кнопка, футер и тайтл должны оставаться на месте.

[Steppp]

Андрей, Так?

[Андрей]

Steppp, уже ближе к истине, но я не знаю высоту области, она может быть различна.
даже на Вашем примере кнопка уплыла за границу "телефона"
поэтому фиксированная максимальная высота не выход.
высота блока .items должна ограничиваться высотой блока .main-wrap минус высота блока с кнопкой, хедера и футера, которые тоже по высоте контента

[Steppp]

Андрей, Мучайтесь) Я не совсем понял как надо(((
Блок phone должен какойто высотой ограничеватся! От этой высоты и плясать до items.

Или вы имеете ввиду, если в item больше 2х строк, то в items делать скролл?

[Андрей]

Steppp, блок .phone это просто эмуляция телефона(они могут быть разной высоты).
Но я таки разобрался
кодпен

[Steppp]

Андрей, Так а в самом верху, Lorem ipsum Не весь вмещается

[Андрей]

Steppp, он для показа что есть контент и все. Он тут не важен. Извиняюсь если это ввело в заблуждение. Спасибо за попытку помочь!