位于底部的元素，先前元素填充高度

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元素：

height: 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>

Answer 2

你需要将高度自动设置为容器类，所以依赖于高度增加的字符串长度。

＆＃13;

＆＃13;

<style>
.container {
  width: 240px;
  height: auto;
  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;
}
</style>
<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>

＆＃13;

＆＃13;

＆＃13;