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

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

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

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

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

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

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

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

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

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

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

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

Как отобразить отдельно элемент из div, если у div стоит display: none?

Не меняя структуру или стили нельзя.

Как делать смену цвета во втором блоке?

zveronol, но SCSS все равно компилируется в обычный CSS. проблема только в поддержке старых браузеров.
Сам пытался переопределять переменные таким способом. в итоге приходилось дублировать строки кода что бы применились новые значения переменных.
ссылка