html - div中多个孩子的css高度

Question

目前它看起来像这样：

我希望红色 div 是最大尺寸而不与蓝色 div 的底部重叠。

绿色 div 的大小根据文本的长度而变化。

<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

您可以将父div级变成弹性容器并flex-grow在第二个容器上使用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>