Div under another div that fills the space in the parent

Question

Putting it simple.

Here is what I done:

https://codepen.io/matt1991/pen/abdeZNv

I've tried using flexbox to a extent, tried to mess with a lot of classes and properties, and yet can't do what I need, that is:

I need the div right-down to fill the space under the div right-up until both of them, together, have the same height of left, using only css, on a system built up on materialize.css. I know how to do that with javascript involved, but I want to make it using only css, in a way that, if left or right-up get more or less text, the size stays the same.

ps.: The red div MUST stop at the green one, it cannot go until the top and z-indexed behind the green one.

Any ideas?

Answer 1

If it's okay to remove the materialize.css it's easy:

<div id="main" class="container">
  <div class="flex">
    <div id="left">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci. Integer sodales viverra erat, quis tincidunt ante ornare sit amet. Donec sed urna urna. Cras in lectus in erat iaculis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum in lorem eget tristique. Nam at ex commodo, vestibulum nulla quis, convallis dolor. Etiam posuere augue massa. In pulvinar vitae dolor vel feugiat.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci. Integer sodales viverra erat, quis tincidunt ante ornare sit amet. Donec sed urna urna. Cras in lectus in erat iaculis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum in lorem eget tristique. Nam at ex commodo, vestibulum nulla quis, convallis dolor. Etiam posuere augue massa. In pulvinar vitae dolor vel feugiat.
    </div>
    <div id="right">
      <div id="right-up">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam urna, non imperdiet turpis. Nullam id mauris vel neque eleifend sollicitudin sit amet nec justo. Mauris auctor, erat nec bibendum posuere, nibh justo elementum orci, ut convallis tellus risus a orci. 
      </div>
      <div id="right-down"></div>
    </div>
  </div>
</div>

body {
  height: 100%
}

#main {
  display: flex;
  flex-flow: column;
  height: 100%
}

.flex {
  display: flex;
}

#left {
  background-color: blue;
  flex: 2;
}


#right {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#right-up {
  background-color: green;
}

#right-down {
  background-color: red;
  flex: 1;
}