Colonnes Flexbox se chevauchent

Je suis en train d'imiter la WinJS regroupés affichage de la liste à l'aide de flexbox. Je suis proche (je pense), sauf que les colonnes de chevauchement lors d'un redimensionnement.

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

Je veux les éléments à l'intérieur du groupe et de laisser le groupe se développent horizontalement.

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;
}

Les idées de ce que je suis absent?

source d'informationauteur martian

flexbox

26

Si vous ne voulez pas que votre contenu à déborder le conteneur, vous devez spécifier flex-shrink: 0;

flex-shrink source

Ce "numéro" composant définit flex de réduire la main et spécifie le flex rétrécir facteur qui détermine la façon dont beaucoup de la flexion de l'élément diminuera par rapport au reste de la flexion des éléments dans le conteneur flex lorsque négatif de l'espace libre est distribué. S'il est omis, il est mis à 1. Le flex rétrécir facteur est multiplié par le flex de base lors de la distribution de l'espace négatif.

Im pas sûr de ce que winJS comportement que vous essayez d'imiter depuis je n'ai jamais utilisé winJS, cependant, je pense que c'est plus proche du bon comportement que vous cherchez à atteindre: http://jsfiddle.net/w8ts4Lnx/11/
2

Les colonnes se chevauchent car le contenu ne convient pas. Les Éléments ne rentrent pas dans le groupe, afin qu'elles se fondent.
Pour résoudre ce problème, vous devez spécifier un débordement-stratégie pour le groupe-div, avec "débordement" comme ceci (le dernier):
```
#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

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

    overflow: hidden;
}
```
La valeur par défaut est visible qui les faire tomber à l'extérieur. Lire la suite ici: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Il y a d'autres options que hidden. Vous pouvez définir verticale/horizontale de défilement, ou les deux. Il suffit de choisir ce que vous obtient plus près de ce qui est désiré "WinJS regroupés affichage de la liste". Essayez:
```
overflow-x: scroll;
overflow-y: auto;
```
ou
```
overflow-y: auto;
overflow-x: scroll;
```
Bon codage!

"de laisser le groupe se développent horizontalement"- Vous devez utiliser le flex-direction de la "ligne" sur le .groupe, et vous avez de l'envelopper les groupes à l'intérieur du #contenu, alors il ne se chevauchent pas plus..

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;    
}

1

Je pense qu'il serait préférable de ne pas définir la largeur que vous voulez flexbox pour déterminer dynamiquement. donc je l'ai enlevé et puis j'ai ajouté flex croître à accroître le premier groupe.

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;
}
```

C'est la bonne réponse qui résout le chevauchement des colonnes:

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

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

Vous devez vous connecter pour publier un commentaire.