具有动态高度的 CSS 垂直堆叠元素

Question

我试图垂直堆叠两个元素，每个元素都具有动态高度。

第一个元素将固定在顶部，第二个元素将溢出，我希望它可以滚动，但第一个元素的高度未知。

所以假设第一个元素的高度可以在 100 到 150 像素之间的任何地方。第二个元素的高度需要是 100% 减去第一个元素的高度。

那么我如何让两个元素都是动态的而不必固定第一个元素的高度。

#element-1
    width: 100%
    min-width: 300px
    height: 150px

#element-2
    width: 100%
    min-width: 300px
    height: calc(100% - 150px)
    overflow-y: auto
    -webkit-overflow-scrolling: touch

我有这个并且它可以工作但是如果元素 1 小于 150px 那么我在两个元素之间有这个不需要的死空间。

Answer 1

在您的情况下，CSS flexbox 将有助于以动态高度垂直堆叠元素。

因此，要做到这一点，您需要将 display: flex; 和 flex-direction: column; 属性添加到您想要使用动态高度垂直堆叠的动态元素的父元素。

parent-element {
  display: flex;
  flex-direction: column;
}

工作样本：

div {
  padding: 2em;
}

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
  background-color: lightgrey;
  width: 400px;
  height: 350px;
  margin: 10px auto;
}

.element-1 {
  background-color: lightgreen;
  height: 100px;
}

.element-2 {
  background-color: lightblue;
  height: 100%;
}

<div class="container">
  <div class="element-1">Fixed Element</div>
  <div class="element-2">Dynamic Element</div>
</div>