Kozack
@Kozack
Thinking about a11y

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

Пример тут - https://jsfiddle.net/29yyyz2y/
Есть Flexbox-контейтер с ограниченой высотой. Условно 150px;
В контейнере находится ряд Flexbox-элементов, разной высоты. Эти элементы строятся в обратном порядке.
Почему верстка в примере ломается?
Если отключить свойство display: flex; у контейнера, то всё хорошо, но тогда внутренние элементы идут не в обратном порядке.
Если отключить свойство display: flex у внутренних элементов, то тоже всё хорошо, но тогда дата не там где нужно.
Если прописать на внутренних элементах минимальную ширину, то тогда элементы где мало текста получаются шире чем положено.
Как выйти из ситуации?
  • Вопрос задан
  • 197 просмотров
Пригласить эксперта
Ответы на вопрос 1
@jasy
если вам нужен эффект, чтобы шли записи в обратном порядке в ограниченном контейнере с полосой прокрутки, то можно поместить flex-контейнер в обычный блок, задать ему минимальную высоту и overflow:auto:
.news {
  max-height: 150px;
  overflow: auto;  
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы