html - DIV 继续向下移动直到达到最大高度

Question

.parent {
  position:relative;
  background: azure;
  height: 200px;
  max-height: 100%;
}

<div class='parent'>
<h1 class='start'>START</h1>
<h2 class='in-between'>
  THIS TEXT IS SUPPOSED TO GET `OVERFLOW` WHEN `.FINISH` REACHES THE POINT OF LEAVING THE `.PARENT` FREESPACE FREESPACE FREESPACE FREESPACE FREESPACE FREESPACE
</h2>
<h1 class='finish'>FINISH</h1>
</div>

我想让 .finish 留在 .parent 中，方法是让 .in-between 到 overflow> 使用滚动。

Answer 1

你可以像这样使用 flex 布局:

.body {
  background-color: azure;
  border:1px solid;
  height: 250px;
  display:flex;
  flex-direction:column;
}
.text {
  overflow: auto;
}

<div class='body'>
  <h1>Hello</h1>
  <div class='text'>World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World WorWorld ld World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World World WorWorld ld World World World World World World World World World World World World</div>
  <h1>END</h1>
</div>
<div class='body'>
  <h1>Hello</h1>
  <div class='text'>World World World World World World World World World World World World World World World World d</div>
  <h1>END</h1>
</div>
<div class='body'>
  <h1>Hello</h1>
  <div class='text'>World </div>
  <h1>END</h1>
</div>