Css 另一个Div下的Div，该Div填充父级中的空间

简单地说

以下是我所做的：

我在某种程度上尝试过使用flexbox，尝试过处理大量的类和属性，但却无法完成我需要的任务，即：

我需要div

右下

来填充div

右上

下的空间，直到在一个基于materialize.css构建的系统上，这两个div一起具有与

左

相同的高度。我知道如何使用javascript实现这一点，但我只想使用css，如果

left

或

right up

获得更多或更少的文本，大小保持不变

注：红色div必须停在绿色div处，直到顶部和z索引位于绿色div后面时才能移动

---

有什么想法吗？

如果可以删除materialize.css，那么很容易：

<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>

---

尝试增加高度：100vh；在你的右边area@SaifWarsi不起作用，它有一个“静态”高度，类似于我以像素为单位设置的高度。我不能删除materialize，整个系统是建立在它之上的。我不是说你应该删除整个系统，只删除这个小部件的css类，然后我的解决方案就可以了。谢谢，它工作得很好，现在我将阅读所有内容并尝试理解。我制作了另一个示例，说明所有css类都在使用中：但我为.col和.row添加了一些规则以使其工作。我认为我的第一个解决方案是更好的。你是如何使左列占容器的66%（列s8）和其他两个33%的？在css或类中找不到任何内容

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;
}