html - 嵌套的 div。根据顶部 div 大小自动设置底部 div 高度

Question

我有一个固定高度的父 div。在它里面我有两个 div 对齐到顶部和底部。顶部 div 具有最大高度和最小高度。当 div 中有很多文本时，它会增长到最大高度。

在这种情况下，当顶部 div 中的数据很少时，底部 div 应该填充父 div 的剩余空间。

.div1 {
  border: 1px solid blue;
  top: 0;
  position: absolute;
  width: 100%;
  overflow: auto;
  max-height: 384px;
  min-height: 160px;
}
.div2 {
  border: 1px solid red;
  bottom: 0;
  position: absolute;
  height: auto;
  min-height: 202px;
}
.parent_el {
  height: 586px !important;
  border: 1px solid black;
  position: relative;
}

<div class="parent_el">
  <div class="div1" id=div1>
    Text. Here can be huge text also
  </div>
  <div id="map" class="div2">
    Here would be picture or map so it must grow in height when top div is small
  </div>
</div>

Answer 1

这是 flexbox 的完美案例:

.parent_el {
  display: flex;           /*make parent a flexbox*/
  flex-direction: column;  /*children should go down the page*/
}

.div2 {
  flex: 1;                 /*fill the rest of the container*/
}

删除 position: absolute 和 width: 100% 就像我在我的代码片段中所做的那样。

片段演示最小高度:

.parent_el {
  display: flex;           /*make parent a flexbox*/
  flex-direction: column;  /*children should go down the page*/
  height: 586px;
  border: 1px solid black;
}

.div1 {
  border: 1px solid blue;
  max-height: 384px;
  min-height: 160px;
  overflow: auto;
}

.div2 {
  flex: 1;                 /*fill the rest of the container*/
  border: 1px solid red;
}

<div class="parent_el">
  <div class="div1">
    Text. Here can be huge text also
  </div>
  <div class="div2">
    Here would be picture or map so it must grow in height when top div is small
  </div>
</div>

---

片段 展示最大高度:

.parent_el {
  display: flex;           /*make parent a flexbox*/
  flex-direction: column;  /*children should go down the page*/
  height: 586px;
  border: 1px solid black;
}

.div1 {
  border: 1px solid blue;
  max-height: 384px;
  min-height: 160px;
  font: 50px arial;
  overflow: auto;
}

.div2 {
  flex: 1;                 /*fill the rest of the container*/
  border: 1px solid red;
}

<div class="parent_el">
  <div class="div1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="div2">
    Here would be picture or map so it must grow in height when top div is small
  </div>
</div>