Как я могу иметь 4 «подноса» на каждой стороне коробки с флексбоксом с растяжкой?

Question

Есть основной блок (# root), в котором мне нужно 4 внутренних блока, каждый с одной стороны полностью растянут (посмотрите фрагмент кода).

Сейчас я здесь :

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top {
  height: 48px;
  width: 100%;
}

.tray-bottom {
  height: 48px;
  width: 100%;
  align-self: flex-end;
}

.tray-left {
  width: 48px;
}

.tray-right {
  width: 48px;
}

<div id="root">
    <div class="tray tray-top">top</div>
    <div class="tray tray-left">left</div>
    <div class="tray tray-right">right</div>
    <div class="tray tray-bottom">bottom</div>
</div>

Теперь я хочу, чтобы left и right полностью растянулись между top и bottom.

Обратите внимание, что все лотки имеют фиксированную ширину (слева, справа) или фиксированную высоту (сверху, снизу).

Я бы не стал вкладывать больше элементов div в существующие.

Flexbox это не обязательно, но я нашел это простым и перспективным по сравнению с другими возможностями.

Answer 1

Простая конфигурация с плавающей точкой может сделать это без flexbox:

html,
body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top,
.tray-bottom {
  height: 48px;
  line-height:48px;
  clear: both;
}

.tray-left,
.tray-right {
  width: 48px;
  height: calc(100% - 96px);
  float: left;
}

.tray-right {
  float: right;
}
/* to align vertically the content */
.tray-left::before,
.tray-right::before {
  content:"";
  display:inline-block;
  height:50%;
}

<div id="root">
  <div class="tray tray-top">top</div>
  <div class="tray tray-left">left</div>
  <div class="tray tray-right">right</div>
  <div class="tray tray-bottom">bottom</div>
</div>

Answer 2

CSS -Сетка может сделать это:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-align: center;
}

#root {
  background-color: blue;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.tray {
  box-sizing: border-box;
  background-color: red;
  border: thin solid black;
}

.tray-top {
  height: 48px;
  grid-column: 1 / -1;
}

.tray-bottom {
  height: 48px;
  grid-column: 1 / -1;
}

.tray-left {
  width: 48px;
}

.tray-right {
  width: 48px;
  grid-column:3;
}

<div id="root">
    <div class="tray tray-top">top</div>
    <div class="tray tray-left">left</div>
    <div class="tray tray-right">right</div>
    <div class="tray tray-bottom">bottom</div>
</div>