Почему flex-box с overflow себя так ведет?

Question

[Dmitry Katyushin]

Здравствуйте.

Очень хочется узнать, почему контент "вылезает" из flex-box, а не скроллится вертикально из-за свойства overflow-y: scroll? Параграфы просто не хотят переноситься в родительском блоке, я даже не ожидал. Заранее благодарю за помощь

САМ КОД (CodePen)

Answer 1

[Алексей Захаров]

если правильно понял, что хотите, то уберите flex-flow:column wrap; и сделайте просто flex-wrap: wrap;

Comments

[Dmitry Katyushin]

да, заработало, спасибо. не понятно почему через column так работает, он ведь их вроде также должен переносить

[Алексей Захаров]

Dmitry Katyushin: если вы хотите использовать column, то вам wrap надо было убрать, так как вы ограничиваете высоту контейнера и ставите перенос, соотвественно, остальные параграфы у вас в следующую колонку перестраиваются, которые не влезли в 100vh

Answer 2

[Nick Krogan]

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

Comments

[Dmitry Katyushin]

Увы, prntscr.com/dcur13 Ну что-то вообще не понимаю что происходит, весь контент внутри блока просто игнорируется, из-за column wrap как минимум они должны переносится, не понимаю что происходит :(

[Danila]

не правы, флекс назначается контейнеру, а не элементам

.app-content {
  flex-flow: column nowrap;
}

должно решить проблему

[Nick Krogan]

Dmitry Katyushin: напишите флекс не в сокращенном виде, а в обычном. может поможет

[Dmitry Katyushin]

Данила: работает либо через row wrap, либо через column nowrap. Вообще я до этого всегда думал что если column то это можно сказать по-любому wrap, ведь все выравнивается вертикально, а раз вертикально то все переносится