如何動態設置溢出設置為自動的div內容的高度？

Question

有一個父 div，它有兩個子 div。 我希望父 div 的高度為身體的 100%，並且每個子 div 都應該從它們內部的內容中獲得動態高度，所以我不能為它們中的任何一個設置特定的高度，除此之外，第二個孩子假設 div 有 auto 溢出，因此即使是第二個子 div 也應該在 body 內部，而不需要占用空間。

這是它的 html -

<div class="homepage-parent">
   <div class="homepage-parent_child1"></div>
   <div class="homepage-parent_child2"></div>
</div>

這是它的 css -

.homepage-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.homepage-parent_child1 {
  width: 100%;
}

.homepage-parent_child2 {
  width: 100%;
  height: 100%;
  overflow: auto;
}

注意：我不希望 child2 div 到 go 離開父 div，我不想使用絕對定位來做到這一點，我只想知道除了 JavaScript 之外是否還有其他方法來實現這一點。

Answer 1

你的意思是這樣的嗎？ 我無法真正解釋如何，因為我只知道如何使用順風，而且我對 CSS 並不是很精通。 css 應該是這樣的

.homepage-parent {
  min-height: 100%;
  height: 100vh;
  /* No need for flex, but you can use it */
  display: flex;
  flex-direction: column;
}

.homepage-parent_child1 {
  width: 100vh;
}

.homepage-parent_child2 {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: auto;
}