Children will fill all of the available viewport space (also vertically!)

fit_content_style.scss

html {
  width: 100%;
  height: 100%;

  &>body {
    width: 100%;
    height: 100%;

    &>.content {
      display: table;
      width: 100%;
      height: 100%;

      &>* {
        display: table-row;
      }
    }
  }
}

You should also set the height in the .content children.

---

Two-children example:

• The first has: height: 20%;
• The second don't specify height so he fills the available viewport space

---

Three-children example:

• The first has: height: 30%;
• The second don't specify height so he fills the available viewport space
• The third has: height: 10%;