Div 在另一个 div 下填充父级中的 space

Question

简单来说。

这是我所做的：

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

我在一定程度上尝试过使用 flexbox，试图弄乱很多类和属性，但仍然无法满足我的需要，即：

我需要 div right-down 来填充 div right-up 下的 space 直到它们一起具有相同的高度left，仅使用 css，在基于 materialize.css 构建的系统上。我知道如何在涉及 javascript 的情况下做到这一点，但我只想使用 css 来做到这一点，如果 left 或 right-up 获得更多或更少的文本, 大小保持不变。

ps.: 红色 div 必须停在绿色那个，它不能走到顶部并且 z-indexed 落后于绿色那个。

有什么想法吗？

Answer 1

如果可以删除 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>

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

Div 在另一个 div 下填充父级中的 space

Div under another div that fills the space in the parent

css

materialize