Макет с 2 столбцами и 2 рядами

Question

У меня есть .container с 2 столбцами и во втором столбце .right Я хочу иметь 2 строки, но в первом ряду .content следует использоватьоставшееся пространство

это HTML-разметка

<div class="container">
    <div class="left">left</div>
    <div class="right">
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</div>

это 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 {

}

и это должно выглядеть

+--------+----------------------+
|        |                      |
|        |                      |
|        |       content        |
|  left  |                      |
|        |                      |
|        +----------------------+
|        |       footer         |
+--------+----------------------+

Answer 1

Flexbox здесь прекрасно работает, но я хотел бы отметить, что это также идеальная ситуация для CSS Grid.С помощью сетки вы можете избавиться от дополнительного контейнера 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 просто для удовольствия.

Answer 2

Вы можете использовать flexbox полной высоты container:

• вкладывает flexbox колонки внутрь для элемента right,

• используйте flex-grow: 1 на content, чтобы занять оставшееся место.

См. Демо ниже:

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 3

Рабочий пример 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;
}