Я работаю над вложенным макетом flexbox, который должен работать следующим образом:
Самый внешний уровень (ul#main) - это горизонтальный список, который должен расширяться вправо, когда к нему добавляется больше элементов. Если он становится слишком большим, должна быть горизонтальная полоса прокрутки.
#main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
/* ...and more... */
}
Каждый элемент этого списка (ul#main > li) имеет заголовок (ul#main > li > h2) и внутренний список (ul#main > li > ul.tasks). Этот внутренний список является вертикальным и должен при необходимости переноситься в столбцы. При обтекании большего количества столбцов его ширина должна увеличиваться, чтобы освободить место для большего количества элементов. Это увеличение ширины должно применяться также к содержащемуся элементу внешнего списка.
.tasks {
flex-direction: column;
flex-wrap: wrap;
/* ...and more... */
}
Моя проблема в том, что внутренние списки не переносятся, когда высота окна становится слишком маленькой. Я много пытался изменить все свойства flex, стараясь неукоснительно следовать рекомендациям CSS-Tricks, но безуспешно.
Этот JSFiddle показывает, что я имею до сих пор.
Ожидаемый результат (чего я хочу):
Фактический результат (что я получаю):
Более старый результат (что я получил в 2015 году):
ОБНОВИТЬ
После некоторого расследования это начинает выглядеть как большая проблема. Все основные браузеры ведут себя одинаково, и это не имеет ничего общего с моим дизайном flexbox. Еще более простые макеты столбцов flexbox отказываются увеличивать ширину списка при переносе элементов.
Этот другой JSFiddle ясно демонстрирует проблему. В текущих версиях Chrome, Firefox и IE11 все элементы переносятся правильно; высота списка увеличивается в режиме row, но ее ширина не увеличивается в режиме column. Кроме того, при изменении высоты column не происходит немедленного перекомпоновки элементов, но это происходит в режиме row.
Тем не менее, официальные спецификации (смотри, в частности, пример 5), похоже, указывают на то, что то, что я хочу сделать, должно быть возможным.
Может кто-нибудь придумать обходной путь к этой проблеме?
ОБНОВЛЕНИЕ 2
После многих экспериментов с использованием JavaScript для обновления высоты и ширины различных элементов во время событий изменения размера, я пришел к выводу, что это слишком сложно и слишком много проблем, чтобы попытаться решить его таким образом. Кроме того, добавление JavaScript определенно нарушает модель flexbox, которая должна быть максимально чистой.
Сейчас я возвращаюсь к overflow-y: auto вместо flex-wrap: wrap чтобы внутренний контейнер прокручивался вертикально при необходимости. Это не красиво, но это один из способов продвижения вперед, который, по крайней мере, не сильно нарушает удобство использования.