如何根据CSS中第一行div中孩子的高度动态下推第二行div？答案

【问题标题】：How to dynamically push down a second-row div based on the height of the child in the first row div in CSS?如何根据CSS中第一行div中孩子的高度动态下推第二行div？
【发布时间】：2020-08-12 17:16:58
【问题描述】：

一个div内的孩子是否可以根据自己的高度将其他div往下推？

鉴于这个简单的 HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app">
      <div class="main-section">
        <div class="main-form">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget
          sollicitudin urna. Duis congue mattis risus nec volutpat. Cras ut
          risus et diam luctus consectetur. Phasellus aliquam dui nec vehicula
          convallis. Donec sit amet nunc lacus. Praesent eget elit commodo,
          ultricies felis non, tristique ex.
        </div>
      </div>
      <div class="about-section">Hello World</div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

我这里有这个 CSS，基本上有两个 div（main-section 和 about-section），而 main-form 在 main-section 内：

.main-section {
  background-color: red;
  padding: 10px 0 0 10px;
  height: 100px;
  min-width: 100%;

  /* display: table; solution 1*/

  /* overflow: auto; solution 2, it cuts off the yellow div, which is not the desired outcome */
}

.main-form {
  background-color: yellow;
  width: 120px;
  min-height: 180px;

  /* display: table-col; solution 1*/
}

.about-section {
  background-color: blue;
}

父.main-section的高度应该固定为100px。

.main-form 子元素的高度取决于其上文字的长度，但最小高度应为 180 像素。 .main-form 的宽度应固定为 120px。

我尝试更改父元素的overflow 属性，但它切断了子元素。我也试过在父元素上使用display: table，在子元素上使用display: table-col，但是这个解决方案会调整父元素的高度。

这里是一个代码沙箱：https://codesandbox.io/s/romantic-wave-29f5f?fontsize=14&hidenavigation=1&theme=dark

有没有办法做到这一点？

基本上我想要达到的效果是这样的：

【问题讨论】：

标签： html css

【解决方案1】：

float 和 clear 可以完成这项工作：

.main-section {
  background-color: red;
  padding: 10px 0 0 10px;
  height: 100px;
}

.main-form {
  background-color: yellow;
  width: 120px;
  float:left; /* here */
  min-height: 180px;
}

.about-section {
  background-color: blue;
  clear:left; /* and here */
}

<div class="main-section">
  <div class="main-form">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sollicitudin urna. Duis congue mattis risus nec volutpat. Cras ut risus et diam luctus consectetur. Phasellus aliquam dui nec vehicula convallis. Donec sit amet nunc lacus. Praesent eget
    elit commodo, ultricies felis non, tristique ex.
  </div>
</div>
<div class="about-section">Hello World</div>

【讨论】：