滚动选项和绝对底部位置

Question

我正在开发一个聊天界面，它将以消息浮动的方式显示用户的输入和服务器响应。对话输出可能需要比固定高度 div 可用的高度更高的高度，此时我希望在焦点保持在消息上时出现滚动选项出现在 div 的底部。与几乎所有消息传递应用程序都非常相似。

当我只使用：

overflow-y: scroll;

列表与顶部对齐，当文本过多时滚动效果很好。
https://jsfiddle.net/stasov/4pw6sraf/

当我添加应该将列表内容推到底部的 "push-to-bottom" class 时，滚动停止工作。
https://jsfiddle.net/stasov/q6w4fevg/

html:

<body>
    <div class="leftpane">
        <div class="push-to-bottom">
          <ul>
            <li>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget leo vehicula, commodo risus in, eleifend neque. Aliquam ullamcorper, mauris eget dapibus lobortis, purus ante pellentesque sem, quis bibendum eros lectus id erat. Integer non nibh sed orci consequat congue vel sed nibh. Fusce rutrum diam ut vestibulum dapibus. Aliquam vel ipsum consectetur, pellentesque erat vitae, gravida elit. Nam sagittis lacus id quam sagittis pellentesque. Morbi sit amet purus quis quam congue facilisis ac et tellus. Nullam nec porta velit. Sed pretium risus eu mauris euismod, quis finibus metus congue. Duis at arcu eget mi fermentum elementum. Aliquam lacinia massa laoreet, dignissim lorem non, consectetur orci. Aenean tristique ultricies odio quis tristique.
            </li>
            <li>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget leo vehicula, commodo risus in, eleifend neque. Aliquam ullamcorper, mauris eget dapibus lobortis, purus ante pellentesque sem, quis bibendum eros lectus id erat. Integer non nibh sed orci consequat congue vel sed nibh. Fusce rutrum diam ut vestibulum dapibus. Aliquam vel ipsum consectetur, pellentesque erat vitae, gravida elit. Nam sagittis lacus id quam sagittis pellentesque. Morbi sit amet purus quis quam congue facilisis ac et tellus. Nullam nec porta velit. Sed pretium risus eu mauris euismod, quis finibus metus congue. Duis at arcu eget mi fermentum elementum. Aliquam lacinia massa laoreet, dignissim lorem non, consectetur orci. Aenean tristique ultricies odio quis tristique.
            </li>
          </ul>
        </div>
    </div>

    <div class="rightpane">
      Right pane
    </div>

  </body>

CSS:

.leftpane {
    width: 40%;
    float: left;
    background-color: LightBlue;
    height: 500px;
    max-height: 500px;
    overflow-y: scroll;
    position: relative;
}

.push-to-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

.rightpane {
  width: 60%;
  height: 500px;
  max-height: 500px;
  position: relative;
  float: right;
  background-color: Beige;
;
}

也许我要找的布局无法通过上面实现。任何想法将不胜感激。

Answer 1

删除 leftpane 中的第一个 div 并将这些规则添加到 leftpane

.leftpane {
  display: flex;
  flex-direction: column-reverse;
}

工作示例：https://jsfiddle.net/dy2j4gdu/1/

滚动选项和绝对底部位置

Scroll option together with absolute bottom position

html

css

scroll

absolute