html - 自动调整两个 DIV 之间的垂直间距

Question

父级 div 的高度固定为 300px，具体取决于需要放置在下方的第二个 div 中填充了多少内容(不在旁边)第一个 div ，这需要自动调整高度并填充剩余空间。

<div class="parent">
    <div class="child-one">
        Auto adjust the space of this div depending upon "child-two" div height
    </div>
    <div class="child-two">
        Height of this div will depend upon the data filled.
    </div>
</div> 

Answer 1

希望你正在寻找这样的东西

.parent{
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border: 1px solid blue;
}
.child-one{
  flex: 1;
  display: flex;
  align-items: center;
  background: blue;
}
.child-two{
  background: red;
}
.parent div{
  padding: 5px 10px;
}

<div class="parent">
    <div  class="child-one">
        Auto adjust the space of this div depending upon "child-two" div heightLorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te
    </div>
    <div class="child-two">
        Height of this div will depend upon the data filled.Lorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te
    </div>
</div>