Position absolute, make right column height same as left column

Question

I struggle with following problem: we have absolutely positioned two divisions, one is for content, one for navbar. Left one contains huge amount of text, so it's usually stretched far over page height. I want the right one (navbar) to stretch as well. Sadly, I can't obtain it with known methods.

.left, .right {
  position: absolute;
  top: 0;
  bottom: 0;
}

.left {
  left: 0;
  width: 70%;
}

.left .leftc {
  background: red;
}

.right {
  right: 0;
  width: 30%;
  background: green;
}

<div class="left">
  <div class="leftc">
    ABC <!-- large amount of text -->
  </div>
</div>
<div class="right">

</div>

Fiddle

Note: I know how to make right bar with fixed position but I want navbar to be scrolled with whole page as well as rest of content. No fixed positions please.

Answer 1

You can achieve that using display: flex on the body. (I erased all the position settings)

for (i = 0; i < 100; i++)
  $(".leftc").append("<p>xxx</p>");

body {
  display: flex;
  margin: 0;
}
.left {
  width: 70%;
}
.leftc {
  height: 100%;
  background-color: red;
}
.right {
  width: 30%;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <div class="leftc">
    ABC
  </div>
</div>
<div class="right">

</div>

https://jsfiddle.net/tknna6ww/1/