How to make a flex container scroll?

Question

css

Here is the code - https://codepen.io/Menson/pen/XWzzOoB?editors=1100

When I set chat to display: block - there is a scroll, but when I change it to flex - the scroll does not work.
To make sure of this, it is enough to duplicate the spans.

It is important for me that there is exactly flex, because in this case the messages are initially pressed to the bottom.

It is necessary, when adding new spans, to make the scroll work. How can i do this?

Answer 1

This might work for your idea. Make the wrapper flex, and the block inside, in which spans are displayed, a regular block

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 700px;
  height: 150px;
}
.chat {
  display: block;
  overflow-y: scroll;
}

Answer 2

Add class scrollable to wrapper

.scrollable {
    height: 150px;
    overflow-y: scroll;
    width: 700px;
}
.chat {
  display: flex;
  flex-direction: column;
  justify-content: end;
}