Несколько способов решить проблему, когда flex-элементы, размещённые в flex-basis, вытесняют контент за пределы прокрутки:
- Использовать свойство margin:auto для внутреннего контейнера. 3 Оно позволяет автоматически вычислить отступы и разместить элемент по центру. 3
- Установить свойство flex:1 в заголовке. 5 Это сообщит браузеру, что элемент может расширяться и сжиматься, и предпишет захватить как можно больше свободного места. 5
- Убрать свойство flex-flow:column wrap и сделать просто flex-wrap:wrap. 2 Если использовать column, то wrap нужно убрать, так как он ограничивает высоту контейнера и ставит перенос, соответственно, остальные параграфы перестраиваются в следующую колонку. 2
Выбор решения зависит от конкретной ситуации.