Я играю с css3 flexbox в Chrome (не нужно беспокоиться о кросс-браузере для этого). Мне трудно убедить его в том, чтобы выложить мой контент так, как мне хотелось бы. Вот эскиз моей цели:
Здесь jsFiddle моей попытки: http://jsfiddle.net/Yht4V/2/ Кажется, что он отлично работает, за исключением того, что каждый .group
будет расширять свою высоту, а не создавать несколько столбцы.
Я использую flexbox повсеместно здесь. body
располагается вертикально, а div #content
занимает оставшуюся высоту страницы. Каждый .group
располагается горизонтально. Наконец, каждый .item
располагается внутри .group
по вертикали с упаковкой.
К сожалению, каждый .group
заканчивается как один столбец, расширяя высоту #content
, что вызывает вертикальную полосу прокрутки (нежелательную). Если я устанавливаю высоту каждого .group
на фиксированный размер пикселя, элементы разбиваются на несколько столбцов, но это наносит ущерб текучести flexbox. Вот как это выглядит с фиксированными высотами: http://jsfiddle.net/Yht4V/3/
Итак, как я могу заставить div #content
не расширяться вертикально, так как все управляется с помощью flexboxes без установки фиксированной высоты? Я ожидал, что flexbox вызовет больше столбцов вместо расширения высоты своего родителя и вызовет полосу прокрутки.