How to put content in a column using Flexbox?

Question

css

An example is here - https://jsfiddle.net/29yyyz2y/
There is a Flexbox container with limited height. Conventionally 150px;
The container contains a number of Flexbox elements of different heights. These elements are built in reverse order.
Why does the layout in the example break?
If you disable the property display: flex;on the container, then everything is fine, but then the internal elements do not go in reverse order.
If you disable the property display: flexfor inner elements, then everything is fine too, but then the date is not where it should be.
If you set the minimum width on the inner elements, then the elements where there is little text are wider than expected.
How to get out of the situation?

Answer 1

if you want the effect to reverse the entries in a limited container with a scrollbar, you can put the flex container in a regular block, set it to a minimum height and overflow:auto:

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

and remove these properties from the flex container, then it will not cut off its data, and the scrollbar will appear on the parent of the flex container.
https://jsfiddle.net/6patt8qz/