Flex по вертикали — Проценты и пиксели. Как выровнять?

Question

[chelkaz]

Есть основной блок, во весь экран. в высоту 100%
В нем нужно расположить горизонтально 2 блока так, что бы нижний был 200px, а верхний все остальное пространство.

Comments

[Александр]

Используешь флексы.
Внешнему блоку задаешь минимальную высоту в 100%. Однако, это сработает, если body и html также задать минимальную высоту.
Для нижнего внктреннего блока задаешь margin: Npx auto auto; и высоту min-height: 200px.

Answer 1

[Ankhena]

Есть flex:1, есть calc
https://jsfiddle.net/j4wpxLgp/

Answer 2

[meshoot]

Родительскому делаем:

div {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

Детям делаем:

.top {
   height: calc(100% - 200px);
}

.bottom {
  flex: 0 0 200px;
}

Comments

[Вася]

Кратко и лаконично!

Answer 3

[CODALSD]

<div class="flex row">
	<span class="t2 flex column">
		<em class="t1"></em>
		<em class="t2"></em>
	</span>
</div>

.flex {
	display:flex;
}
.row {
	flex-direction:row;
}
.column {
	flex-direction:column;
}
.t1 {
	flex:1 1 100%;
}
.t2 {
	flex:1 1 200px;
}
div {
	width:100%;
	height:100vh;
	background:blue;
}
.flex.column {
	background:red;
}
.column .t1 {
	background:green;
}

Как то так