2 ряда с регулировкой высоты второго ряда ⇐ CSS

[Anonymous]

По высоте экрана с переполнением тела: скрыто, мне нужен столбец с двумя строками.
Первая строка содержит 3 кнопки (.b), которые при отображении на экране достаточно высоки, находятся одно под другим.
Вторая строка содержит видео (.vid), высота которого может меняться даже при загрузке страницы.
Поэтому я бы хотел, чтобы высота первой строки адаптировалась в соответствии с высотой второй строки.
Но когда высота экрана недостаточно велика, высота первой строки один блокируется по отношению к кнопкам, а видео обрезается.
Я пробовал в таблице и в гибком интерфейсе.
Мой тестовый код в гибком интерфейсе:
.container {
position: absolute;
display: flex;
width: 200px;
height: 100%;
right: 0;
top: 0;
flex-direction: column;
}

.container .firstrow {
display: flex;
width: 100%;
height: auto;
flex-grow: 1;
background: #ccc;
}
.container .firstrow .b {
display: block;
width: 50px;
height: 50px;
margin-top: 20px;
background: #888;
}

.container .secondrow {
display: flex;
width: 100%;
height: auto;
background: #c90000;
}
.container .secondrow .vid {
width: 100%;
height: 200px; /*height for example*/
}

Чего хотелось бы, чтобы экран был достаточно высоким:
+---------+
| .b |
| .b |
| .b |
+---------+
| .vid |
| |
+---------+

А когда экран недостаточно высок:
+---------+
| .b .b .b|
+---------+
| |
| .vid |
| |
| |
+---------+


Подробнее здесь: https://stackoverflow.com/questions/783 ... adaptative