Как прижать футер к низу на flexbox?

Question

[Alex Ozerov]

Здравствуйте, вопрос глупый, где-то я что-то проглядел и не могу увидеть, где ошибка.
Суть в том, чтобы прижать футер к низу, родителя("container_wrap") делаю flex-ом, потом переворачиваю. Его child"у("content") задаю flex: 1 1 auto; и по идее он должен прижать футер, но почему-то не прижимает. Возможно где-то я просто не внимателен, но уже долго смотрю на код и не пойму в чем дело.
https://codepen.io/alexxandmerniy/pen/qBdmLOG

Answer 1

[Виталий Першин]

Нужно задать минимальную высоту 100% высоты экрана для контейнера в котором находится футер, в ваше случае так:

.wrapper {
  min-height: 100vh
}

.container_wrap{
	display: flex;
	flex-direction: column;
	border: 4px solid green;
  min-height: 100vh
}

Comments

[Alex Ozerov]

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

[Шохрух Шаймардонов]

ozerovlife, потому что изначально ваш родитель занимает не всю высоту экрана! Можете убедиться создав пустой проект и задав единственный стиль - фон для body. Сразу станет ясно как это работает

[xmoonlight]

Шохрух Шаймардонов, зря ещё про поиск отличий html от body не сказал... А то может тоже думает, что это одно и то же и стилей у html быть не может!)))

[Шохрух Шаймардонов]

xmoonlight, ля. Точно, ну надеюсь не ушел в запой от узнанного)