css height of multiple childs in div

Question

Currently it looks like this:

I want the red div to be the maximum size without overlapping the bottom of the blue div.

The size of the green div changes depending on the length of the text.

<div id="container">
  <div id="first">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div id="second">
  Lorem ipsum
  </div>
</div>

<style>
#container {
background: blue;
width: 100vw;
height: 300px;
}

#first {
  background: green;
  width: 100vw;
}
#second {
  background: red;
}
</style>

Answer 1

You can turn the parent div into a flex-container and use flex-grow on the second div

#container {
background: blue;
width: 100vw;
height: 300px;
display:flex;
flex-direction:column;
}

#first {
  background: green;
  width: 100vw;
}
#second {
  background: red;
 flex-grow:1;
}

<div id="container">
  <div id="first">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div id="second">
  Lorem ipsum
  </div>
</div>