Как растянуть вертикальный header на всю высоту с помощью flex?

Question

[ychenik10b]

Как растянуть вертикальный header на всю ширину с помощью flex? Общему контейнеру задал высоту 100vh. Самому header задал min-высота 100%. Не применяется. Пробовал добавить flex-grow тоже не работает. Выделил красным border как у меня получился header и второе фото, как должно быть.

фото2

Comments

[IvanU7n]

вместо картинок лучше пример в какой-нить песочнице типа codepen.io

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/VwRGbzQ

Comments

[ychenik10b]

Благодарю Сергей, а не могли бы поправить именно мой код? Мне так будет чуть проще понять, я совсем зелёный.
https://codepen.io/Uchenik10b/pen/jOJvmpP

[Сергей delphinpro]

ychenik10b,
1. опечатка в имени класса wrapper
2. Потомкам флекс-контейнера не нужно задавать 100% высоту. При align-items: stretch (а это значение по умолчанию, если не указано иное) они и так будут равны высоте родителя.

PS. Флекс внутри header с вертикальным направлением в общем-то не нужен. Обычные блоки и так по умолчанию идут в столбик

[Сергей delphinpro]

ychenik10b, https://codepen.io/delphinpro/pen/yLwxbwa

[Сергей delphinpro]

ychenik10b, Причёсывайте код, когда показываете его кому-то

[ychenik10b]

Сергей delphinpro, спасибо вам огромное