Scroll option together with absolute bottom position

Question

I'm working on a chat interface that will display the user's input and the server response in way where the messages float up. The conversation output might take more height than available for the fixed height div and at that point I'd like a scroll option to appear while the focus remains on the messages that appear on the bottom of that div. Very similar to almost every messaging app.

When I use only:

overflow-y: scroll;

The list is aligned to the top and the scrolling works well when there's too much text.
https://jsfiddle.net/stasov/4pw6sraf/

When I add the "push-to-bottom" class that is supposed to push the list content to the bottom, the scrolling stops working.
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;
;
}

Maybe the layout I'm looking for can't be achieved by the above. Any ideas would be greatly appreciated.

Possible duplicate of [Scroll Automatically to the Bottom of the Page](https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) — lumio, Nov 11 '17 at 13:01

score 1 · Accepted Answer · answered Nov 11 '17 at 13:19

1

Remove the first div inside leftpane and add these rules to leftpane

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

Working example: https://jsfiddle.net/dy2j4gdu/1/

answered Nov 11 '17 at 13:19

Nikhil Fadnis

850
6
8

Magic! Thank you. – Stasv Nov 11 '17 at 15:53

Scroll option together with absolute bottom position

1 Answers1