Layout with 2 columns and 2 rows - html

Question

I have a .container
with 2 columns and in the second column .right I want to have 2 rows
but the first row .content should use the remaining space
this is the HTML markup
<div class="container">
<div class="left">left</div>
<div class="right">
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
this is the CSS
.container {
display: flex;
flex-direction: row;
height: 400px; /* the remaining space in the screen will be nice */
}
.left {
width: 300px;
}
.right {
flex-grow: 1;
}
.content {
align-self: stretch; /* this is not doing anything*/
}
.footer {
}
and this is how it should look
+--------+----------------------+
| | |
| | |
| | content |
| left | |
| | |
| +----------------------+
| | footer |
+--------+----------------------+

Answer 1

You can use a full height flexbox container:
nest a column flexbox inside for the right element,
use flex-grow: 1 on content to occupy remaining space.
See demo below:
body {
margin: 0;
}
.container {
display: flex;
/* flex-direction: row; <-- omit this, its default */
height: 100vh; /* full height */
}
.left {
width: 300px;
border: 1px solid;
}
.right {
flex-grow: 1; /* occupy remaining space */
display: flex;
flex-direction: column; /* column flexbox */
border: 1px solid;
}
.content {
flex-grow: 1; /* occupy remaining space */
border-bottom: 1px solid;
}
<div class="container">
<div class="left">left</div>
<div class="right">
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>

Answer 2

Flexbox works just fine here but I wanted to point out this is also a perfect situation for CSS Grid. With grid you can get rid of the extra container div.right.
<div class="container">
<div class="left">left</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
.container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr 100px; /* change the 100px to your desired height of the footer*/
grid-template-areas:
'left content'
'left footer';
height: 400px; /* height OP selected */
}
.left {
grid-area: left;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
A CodePen just for fun.

Answer 3

Working example jsfiddle
.container {
display: flex;
flex-direction: row;
height: 100VH;
}
.left {
width: 200px;
border: 1px solid;
}
.right {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content {
border: 1px solid #333;
border-bottom: 0;
flex-grow: 1;
}
.footer {
border: 2px solid;
height: 100px;
}