On the height of the screen with a body overflow:hidden, I would like a column with 2 rows.

The first row contains 3 buttons (.b) which when the screen is high enough are one below the other.

The second row contains a video (.vid) whose height can vary even when the page is loaded.

I would therefore like the height of the permie row to adapt according to the height of the second.

But when the height of the screen is not large enough, the height of the first one is blocked in relation to the buttons and the video is truncated.

I tried in table and in flex.

My test code in flex:

.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*/
}

What I would like when the screen is high enough:

+---------+
|  .b     |
|  .b     |
|  .b     |
+---------+
|  .vid   |
|         |
+---------+

And when the screen is not high enough:

+---------+
| .b .b .b|
+---------+
|         |
|  .vid   |
|         |
|         |
+---------+