Как правильно сделать две колонки на flexbox?

Question

[mrSeller]

Добре, задача стоит сделать две колонки с "книжным" контентом - т.е. контент из первой колонки, при нехватке высоты, переносится во вторую колонку.

Накидал текущий мой прогресс



Высота фиксированная, если контент не влезает - должен появиться скролл.
Но вместе со скроллом, почему-то, становится три колонки.

Если на flexbox это невозможно, как тогда это можно реализовать?

Comments

[Ankhena]

Начнем с того, что columns свойство странное, точнее распределение по колонкам. Зависит от размера блоков.
Чтобы не было переноса внутри мелких блоков, им задают display inline-block.
Для прокрутки нужна дополнительная обертка с ограниченной высотой.
https://jsfiddle.net/pqf69j81/

Альтернатива: masonry

Answer 1

[Сергей delphinpro]

Вроде как элементарно, на колонках (которые для этого и предназначены)

Comments

[Ankhena]

При том "контенте", который у автора сейчас, колонки творят ерунду (в комментариях код). Но надеюсь, что вживую контента будет больше и выглядеть оно станет нормально.

[Сергей delphinpro]

Ankhena, ну я же поменял разметку. Думаю лдя него некритично, он только пилит верстку, а не дорабатывает.

[Ankhena]

Сергей delphinpro, надеюсь

Answer 2

[Dima Polos]

Кажется это:
htmlbook.ru/css/columns

Comments

[mrSeller]

Так же при нехватке высоты добавляет колонки, хоть и указываю, что надо две.
Еще и контент переносит внутри дочерних блоков, а нужно только дочерними блоками оперировать, как единицами.

Answer 3

[Полина Емельянова]

Привет.))

По скроллу: скролла не будет, пока ты не дашь части с ограниченной высотой враппер с overflow: hidden;.
Поставь его на боди - и вот твой скролл.

По колонкам.
У тебя нет ограничений по ширине на родителе. Так почему бы флексу с колоночным направлением, при ограниченной высоте, не дать тебе 3-ю, 4-ю да хоть 10-ю колонку?
Дай на родителя max-width равный 2 ширинам твоих колонок по макету, а колонкам - 50% с паддингами и маргинами. Это как вариант.

И да, можно еще columns заюзать, но в твоем случае может стать проблема обрезания блоков по высоте. Тогда нужно дать потомкам инлайн-блочный дисплей.

Comments

[mrSeller]

Ширина у родителя стоит, но даже если поставить max-width - все равно результат тот же: появляется третья колонка.