Я работаю над вложенным макетом 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
чтобы внутренний контейнер прокручивался вертикально, когда это необходимо. Это не красиво, но это один из способов продвижения вперед, который, по крайней мере, не сильно нарушает удобство использования.
column wrap
не расширяет свою ширину при переносе. См. Code.google.com/p/chromium/issues/detail?id=247963 для получения дополнительной информации.Ответы:
Эта проблема
Это похоже на фундаментальный недостаток гибкого макета.
Гибкий контейнер в направлении столбцов не будет расширяться для размещения дополнительных столбцов. (Это не проблема в
flex-direction: row
.)Этот вопрос задавался много раз (см. Список ниже), без четких ответов в CSS.
Трудно связать это с ошибкой, потому что проблема возникает во всех основных браузерах. Но это поднимает вопрос:
Можно подумать, что хотя бы один из них понял это правильно. Я могу только размышлять о причине. Возможно, это была технически сложная реализация, и она была отложена для этой итерации.
ОБНОВЛЕНИЕ: проблема, кажется, решена в Edge v16.
Иллюстрация проблемы
ОП создал полезную демонстрацию, иллюстрирующую проблему. Я копирую это здесь: http://jsfiddle.net/nwccdwLw/1/
Варианты обхода
Решения от сообщества Stack Overflow:
«Кажется, эта проблема не может быть решена только с помощью CSS, поэтому я предлагаю вам решение JQuery».
«Любопытно, что в большинстве браузеров неправильно реализованы гибкие контейнеры столбцов, но поддержка режимов записи достаточно хорошая. Поэтому вы можете использовать гибкий контейнер строк с вертикальным режимом записи».
Больше анализа
Сообщение об ошибке хрома
Марк Эмери ответ
Другие сообщения, описывающие ту же проблему
источник
Опоздал на вечеринку, но все еще сталкивался с этой проблемой ГОДАМИ позже. Закончилось поиском решения с использованием сетки. На контейнере вы можете использовать
У меня есть пример на CodePen, который переключается между проблемой flexbox и исправлением сетки: https://codepen.io/MandeeD/pen/JVLdLd
источник
grid-row-end: span X;
если вам нужно, чтобы некоторые элементы занимали больше строк.К сожалению, многие крупные браузеры страдают от этой ошибки спустя много лет. Рассмотрим обходной путь Javascript. Всякий раз, когда окно браузера изменяет размеры или содержимое добавляется к элементу, выполняйте этот код, чтобы заставить его изменить размер до нужной ширины. Вы можете определить директиву в своей структуре, чтобы сделать это для вас.
источник
Я только что нашел действительно потрясающий обходной путь PURE CSS здесь.
https://jsfiddle.net/gcob492x/3/
Хитрость: установите
writing-mode: vertical-lr
в списке div, затемwriting-mode: horizontal-tb
в элементе списка. Мне пришлось настроить стили в JSFiddle (удалить много стилей выравнивания, которые не нужны для решения).Примечание: комментарий говорит, что он работает только в браузерах на основе Chromium, а не в Firefox. Я только лично тестировал в Chrome. Возможно, есть способ изменить это, чтобы он работал в других браузерах, или были обновления для указанных браузеров, которые делают эту работу.
Большой комментарий к этому комментарию: когда элементы flexbox переносятся в режиме столбца, контейнер не увеличивается в ширину . Изучение этой темы привело меня к https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39, который привел меня к этому JSFiddle.
источник
Поскольку решения или правильного обходного пути пока не предлагалось, мне удалось получить требуемое поведение с немного другим подходом. Вместо того, чтобы разделять макет на 3 разных элемента, я добавляю все элементы в 1 блок и создаю разделение с несколькими дополнительными элементами.
Предлагаемое решение жестко запрограммировано, предполагая, что у нас есть 3 раздела, но может быть расширено до общего. Основная идея состоит в том, чтобы объяснить, как мы можем достичь этого макета.
:before
на каждом первом элементе, мы можем найти заголовок каждого раздела.space
создает разрыв между разделамиspace
не будет охватывать всю высоту раздела, я также добавляю:after
к разделам, поэтому позиционирую его с абсолютным положением и белым фоном.z-index: -1
.источник
Возможное решение JS ..
источник
columns
свойства стиля может стать отправной точкой для рабочего решения. Возможно корректировка количества колонок и ширины ул.