html - 将元素定位在底部，之前的元素填充高度

Question

第一个 div 应填满剩余的高度，而第二个 div 应以其初始高度定位在底部。

演示:

.container {
  width: 240px;
  height: 400px;
  background: #E0E0E0;
  display: flex;
  flex-direction: column;
}

.first {
  border :1px solid black;
  padding: 1em;
  box-sizing: border-box;
}

.second {
  border: 1px solid blue;
  padding: 1em;
  box-sizing: border-box;
}

<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>

</div>

Answer 1

这个问题的答案因标记而异，但在您的情况下，您可以将其添加到您的 first 元素中:

高度:100%；

这是因为容器的 flex 显示属性。容器上的不同属性可能需要另一种解决方案。

Demo

完整代码

.container {
  width: 240px;
  height: 400px;
  background: #E0E0E0;
  display: flex;
  flex-direction: column;
}

.first {
  height: 100%;
  border :1px solid black;
  padding: 1em;
  box-sizing: border-box;
}

.second {
  border: 1px solid blue;
  padding: 1em;
  box-sizing: border-box;
}

<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>