Столбцы Flexbox перекрываются

Question

Я пытаюсь имитировать список сгруппированных списков WinJS с помощью flexbox. Я приближаюсь (думаю), за исключением того, что столбцы перекрываются при изменении размера.

http://jsfiddle.net/w8ts4Lnx/5/

Я хочу, чтобы элементы, чтобы оставаться внутри группы и группа расти горизонтально.

body { 
    height: 100%; 
    display: flex; 
    flex-flow: column wrap; 
} 

h1 { 
    padding: 1em; 
} 

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex-flow: row nowrap; 
    flex-grow: 1; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 
    display: flex; 
    flex-flow: column wrap; 
    max-height: 600px;  
} 

#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
    width: 200px; 
} 

Любые идеи, что мне не хватает?

Answer 1

Столбцы перекрываются, потому что содержимое не подходит. Элементы не вписываются в группу, поэтому они перетекают. Чтобы решить эту проблему, вы должны указать перепускной-стратегии для групповой DIV, с «перелива», как это (последняя):

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 

    display: flex; 
    flex-flow: column wrap; 
    max-height: 600px; 

    overflow: hidden; 
} 

по умолчанию visible, которые делают их падения на улице. Подробнее читайте здесь: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Есть другие варианты, кроме hidden. Вы можете установить вертикальную/горизонтальную прокрутку или и то, и другое. Просто выберите то, что приблизит вас к этому желаемому «списку списка WinJS». Попробуйте:

overflow-x: scroll; 
overflow-y: auto; 

или

overflow-y: auto; 
overflow-x: scroll; 

Счастливый кодирования!

Answer 2

Если вы не хотите, чтобы ваше содержание переполнения контейнера необходимо указать flex-shrink: 0;

прогибается термоусадочныеsource

Этот компонент «число» устанавливает гибкий термоусадочные и определяет обычное письмо гибкий коэффициент сжатия, который определяет, насколько гибкий элемент будет уменьшаться относительно остальных элементов гибкости в гибком контейнере, когда распределяется отрицательное свободное пространство. При опускании он устанавливается равным 1. Коэффициент усадки при умножении умножается на основе гибкости при распределении отрицательного пространства.

Я не уверен, что winJS поведение вы пытаетесь подражать, так как я никогда не использовал winJS, однако я думаю, что это ближе к правильному поведению вы хотите достичь: http://jsfiddle.net/w8ts4Lnx/11/

Answer 3

«пусть группа растут горизонтально "- вы должны использовать Flex-направление, как„ряд“на .group, и вы должны обернуть группы внутри #content, то она не будет перекрывать больше ..

http://jsfiddle.net/gafcvq9b/2/

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex-flow: row wrap; 
    flex-grow: 1; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 
    display: flex; 
    flex-flow: row wrap; 
    max-height: 600px;  
} 

Answer 4

Я думаю, было бы лучше не устанавливать ширину, так как вы хотите, чтобы flexbox динамически определял ее. поэтому я удалил его, а затем добавил добавление flex для увеличения первой группы.

http://jsfiddle.net/mspriyakk/vv3tfrtv/3/

#content > .group:nth-of-type(1) { 
    flex-grow: 2; 
} 
#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
} 

Answer 5

Это правильный ответ, что-х фиксирует перекрывающиеся столбцы:

.flex-container { 
    display: flex; 
    flex-flow: column; 
} 

.flex-item { 
    flex: 1 0 auto; 
}