Height for remaining free space HTML

Question

Having three containers, how can I make two containers floating while the third container should occupy the rest of the height, and the second one has the height of the contents?

Answer 1

Try Flex with the following properties.

body {
  margin: 0;
}

.outer {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.left {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.left-top {
  height: 70px;
  width: 100%;
  background: royalblue;
}

.left-bottom {
  background: orange;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  flex: 3;
  background: yellow;
}

<div class="outer">
  <div class="left">
    <div class="left-top"></div>
    <div class="left-bottom">
      Full length
    </div>
  </div>
  <div class="right"></div>
</div>

Answer 2

There are different techniques to achieve this. Here's the simplest one that I can imagine with using float and vh.

HTML:

<div class="mama">
    <div class="container1">Container 1</div>
    <div class="container2">Container 2</div>
</div>
<div class="container3">Container 3</div>

CSS:

.mama {
  float: left
}
.container1 {
  height: 10vh;
  background-color: gray;
}

.container2 {

  height: 90vh;
  background-color: red;
}

.container3 {
  width: 100%;
  background-color: orangered;
  height: 100vh;
}

Here it is on codepen