Нет полосы прокрутки, если элемент больше, чем его контейнер flexbox

Question

Flexbox можно использовать для вертикального выравнивания элементов. Но когда элемент с вертикальным выравниванием позже растет, он может выйти из границ своего контейнера flexbox. Это происходит даже тогда, когда на элементе используется overflow:auto.

Настоящая демоверсия с некоторыми ожидаемыми и фактическими результатами.

Использование демо:

1. Open the demo
2. Enter много текста в сером поле

Ожидаемый результат:

Этот пункт становится выше, как текст вошел. Когда абзац такой же высокий, как и его контейнер flexbox, он перестает расти и отображается вертикальная полоса прокрутки.

Фактический результат:

Этот пункт становится выше, как вводится текст, но никогда не перестает расти. Это в конечном счете ускользает от границ его контейнера flexbox. Полоса прокрутки никогда не отображается.

Другие ноты:

Заманчиво поставить overflow:auto на контейнере вместо этого, но это не работает, как ожидалось. Попробуйте. Введите много текста, а затем прокрутите вверх. Обратите внимание, что верхнее заполнение отсутствует и строки текста отсутствуют.

Answer 1

Вам нужно сделать следующее:

1. Добавить "Макс-высота: 100%" на <p> чтобы он не увеличивался бесконечно.

2. Если вы хотите сохранить ваш padding на <p>, вы также необходимо установить box-sizing: border-box, чтобы получить его заполнение, включенных в этот max-height.

(Технически box-sizing:padding-box является то, что вы хотите, но Chrome не поддерживает, что,. Так, border-box будет делать, потому что это то же самое, как обивка коробки, так как нет никакой границы)

Here's your JS Fiddle with this fix

Answer 2

В вашей css вам нужно дать height

p { 
    padding: 20px; 
    width: 100%; 
    background-color: #ccc; 
    outline: none; 
    height: 60px; 

} 

JS Fiddle