Как разместить контент в колонку используя Flexbox?

Question

[Alex]

Пример тут - https://jsfiddle.net/29yyyz2y/
Есть Flexbox-контейтер с ограниченой высотой. Условно 150px;
В контейнере находится ряд Flexbox-элементов, разной высоты. Эти элементы строятся в обратном порядке.
Почему верстка в примере ломается?
Если отключить свойство display: flex; у контейнера, то всё хорошо, но тогда внутренние элементы идут не в обратном порядке.
Если отключить свойство display: flex у внутренних элементов, то тоже всё хорошо, но тогда дата не там где нужно.
Если прописать на внутренних элементах минимальную ширину, то тогда элементы где мало текста получаются шире чем положено.
Как выйти из ситуации?

Answer 1

[jasy]

если вам нужен эффект, чтобы шли записи в обратном порядке в ограниченном контейнере с полосой прокрутки, то можно поместить flex-контейнер в обычный блок, задать ему минимальную высоту и overflow:auto:

.news {
  max-height: 150px;
  overflow: auto;  
}

а у flex-контейнера эти свойства убрать, тогда он не обрежет свои данные, а полоса прокрутки появиться у родителя флекс-контейнера.
https://jsfiddle.net/6patt8qz/