Почему во Flexbox элементы не растягиваются на всю высоту?

Question

[maitre]

Почему во Flexbox элементы (.leftMenu, .mainMenu и .rightMenu) в .main не растягиваются на всю высоту от шапки до футера? Как сделать так чтобы они автоматически растягивались по высоте до щапки и футера?

.body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	max-width: 100vw;
}

.header, .leftMenu, .mainMenu, .rightMenu, .footer {
	margin: 10px;
}

.header {
	background-color: red;
	height: 70px;
}

.main {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.leftMenu {
	background-color: green;
	min-height: 400px;
	width: 200px;
}

.mainMenu {
	background: blue;
	min-height: 400px;
	width: 400px;
}

.rightMenu {
	background-color: orange;
	min-height: 400px;
	width: 200px;
}

.footer {
	background-color: yellow;
	height: 50px;
}

Comments

[Евгений Вольф]

Примером на codepen.io или JSFiddle поделитесь?

[Gortyser]

Используя навыки телепатии, предполагаю, что у автора .leftMenu, .mainMenu и .rightMenu находятся в блоке .header, который флекс-контейнером не является.

Answer 1

[Claus]

.main {
  ...
  flex-grow: 1;
}

Вот пример - output.jsbin.com/laxebufubu

Comments

[maitre]

Заработало с помощью flex-grow, как раз то что нужно, спасибо!