JSFiddle - React, Tailwind, and code Playground

by antonfil

HTML

<div id="container-1">
  Container 1 (width, height: 100%, flex-direction: column)
  <div id="container-2">
    Container 2
    <div id="container-4">
      Container 4
      <br>line 1<br>line 2<br>line 3<br>line 4
      <br>line 5<br>line 6<br>line 7<br>line 8
    </div>
    <div id="container-5">
      Container 5
      <br>line 1<br>line 2<br>line 3<br>line 4
    </div>
  </div>
  <div id="container-3">
    Container 3 (flex-grow: 1)
  </div>
</div>

CSS

html, body {
  width: 95%;
  height: 95%;
}

div[id^=container] {
  padding: 10px;
  margin: 0;
}
#container-1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: aqua;
}

#container-2 {
  display: flex;
  flex-direction: row;
  background-color: red;
}

#container-3 {
  display: flex;
  flex: 1 0;
  background-color: pink;
}

#container-4 {
  display: flex;
  flex: 1 0;
  background-color: yellow;
}

#container-5 {
  display: flex;
  flex: 1 0;
  background-color: orange;
}