Почему не оборачивается обрезается текст при использовании flex?

Question

[serhiops]

При горизонтальном изменении окна меняется размер окна с чатами, но почему-то текст не обрезается по размеру окна:
https://codepen.io/serrhii/pen/ZEgqWRR
То есть правило

.chat .info .message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

не отображается. Интересно, что при стилизации отобрадения чата как грида, все работает ожидаемо:
https://codepen.io/serrhii/pen/zYgmqLM

Comments

[Владислав Лысков]

.chat .info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
}

[serhiops]

Владислав Лысков, спасибо! если оформите как решение, отмечу

[Владислав Лысков]

serhiops, ответ Aleksey Solovyev идентичен, но он объяснил проблему, поэтому и так сойдёт)

Answer 1

[Aleksey Solovyev]

Потому что у вас из-за white-space блок info занимает всю длину текста:

Задайте блоку info overflow hidden, чтобы он знал до какого размера ему обрезать текст:

ну и я бы в 3 колонки (аватар, имя/сообщение, дата/кол) сделал на flex, а не в 2 как у вас, чтобы размеры были одинаковые.

Comments

[serhiops]

спасибо!