垂直对齐底部和自动溢出其他div

Question

我想得到这个

https://jsfiddle.net/93bw5zuv/

<style>
  .mycontent {
    border: 1px solid;
    width: 300px;
    margin: auto;
    height: 250px;
    display: block;
  }

  .top {
    overflow-x: hidden;
    overflow-y: auto;
    margin: 10px;
    border: 2px solid;
    height: 210px; /* must remove this */
  }

  .bottom {
    border: 1px solid red;
  }
</style>

<div class="mycontent">
  <div class="top">
    <br>content
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br>content
  </div>

  <div class="bottom">
    bottom
  </div>
</div>

底层类始终处于该位置和顶级类，达到可用的最大高度，然后获得溢出

问题在于我现在正在使用

height:210px;

为顶级，但底部的高度并不总是相同，然后我必须从css中删除该行

Answer 1

使用flexbox：

＆＃13;

＆＃13;

* {
  box-sizing:border-box;
}
.mycontent {
  border: 1px solid;
  width: 300px;
  margin: auto;
  height: 250px;
  display: flex;
  flex-direction:column;
}

.top {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 10px;
  border: 2px solid;
}

.bottom {
  margin-top:auto; /*to make it stick at bottom*/
  border: 1px solid red;
}

＆＃13;

<div class="mycontent">
  <div class="top">
    <br>content
    <br>content
    <br>content
    <br>content
  </div>

  <div class="bottom">
    bottom
  </div>
</div>

<div class="mycontent">
  <div class="top">
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
  </div>

  <div class="bottom">
    bottom
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;