Как сделать скролл у flex-контейнера?

Question

[Miron4ek_228]

Вот код - https://codepen.io/Menson/pen/XWzzOoB?editors=1100

Когда для chat я устанавливаю display: block - скролл есть, но когда меняю на flex - скролл не работает.
Чтобы в этом убедиться, достаточно продублировать span`ы.

Мне важно чтобы был именно flex, потому что в этом случае сообщения изначально прижаты к низу.

Нужно, при добавлении новых span, чтобы работал скролл. Как я могу это сделать?

Answer 1

[LJ322]

Для вашей задумки может подойти такой вариант. Сделайте обёртку флексом, а блок внутри, в котором отображаются спаны - обычным блоком

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

Answer 2

[Алексей]

Баг ли это или так и было задумано, но с justify-content: flex-end и скроллом во всех браузерах есть проблемы и в одном контейнере они вместе не работают.
Самое простое решение (на мой взгляд) - это перенести скролл в контейнер выше.

вот пример: https://codepen.io/slide13/pen/VwrrOeE

Answer 3

[FeST1VaL]

Добавить класс scrollable к wrapper

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

Comments

[Miron4ek_228]

Увы, в этом случае, если строк мало (к примеру - 4), то текст не прижат к низу как в моем коде