css - UL从底部开始滚动条消失

Question

我想让 Ul 元素从底部开始，当达到容器的高度时，滚动条就会出现。如果它从顶部开始，它会工作，但从底部开始时会失败。

http://jsfiddle.net/4c4crfhb/3/

HTML

<div id="container">
<div class="big"></div>
<div class="parent">
    <ul>
        <li>Element #1</li>
        <li>Element #2</li>
        <li>Element #3</li>
        <li>Element #4</li>
        <li>Element #5</li>
        <li>Element #6</li>
        <li>Element #7</li>
        <li>Element #8</li>
        <li>Element #9</li>
    </ul>
</div>

CSS

.parent {
  background-color: gold;
  overflow-y: scroll;
}

#container ul {
  list-style: none;
  margin: 0;
  position: absolute;
  /*top: 31px; */
  left: 0;
  right: 0;
  bottom: 0;
}

#container {
  height: auto;
  display: -moz-box;
  display: -webkit-box;
  display: box;
}

#container div{
  position: relative;
  width: 200px;
  display: -moz-box;
  display: -webkit-box;
  display: box;
}

#container div.big{
  height: 100px;
  background-color: darkcyan;
}

问题是什么？

我想要实现的是像 Slack 或 Skype 聊天一样，聊天元素从底部开始向上移动，如果溢出，则显示滚动条。

Answer 1

当一个元素html是绝对位置，固定在底部，那么对于parent来说，不超过。这就是滚动不起作用的原因。