Flex base de 100% dans la colonne flexbox: pleine hauteur dans Firefox, pas dans Chrome

Je voudrais une colonne de vrd, de n'importe quel nombre, chacun avec une largeur de 100% et à hauteur de 100% de leur div parent, de sorte que l'une est visible au départ, et les autres de dépassement de la mère vers le bas. J'ai mis les divs avoir flex: 0 0 100%;, à l'intérieur d'un div parent avec display: flex et flex-direction: column pour atteindre cet objectif.

La div parent est lui-même de l'inconnu de la hauteur, de sorte qu'il est aussi un enfant d'un display: flex et flex-direction: column, mis à flex: 1 0 0 de prendre de l'espace restant dans son conteneur.

Dans Firefox, la sortie est comme je le voudrais:

Flex base de 100% dans la colonne flexbox: pleine hauteur dans Firefox, pas dans Chrome

Cependant, pas dans Chrome:

Flex base de 100% dans la colonne flexbox: pleine hauteur dans Firefox, pas dans Chrome

Comment puis-je obtenir Firefox de style dans Chrome, sans Javascript?

Vous pouvez le voir en action à http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview, ainsi que la version correspondante avec flex-direction: row, qui travaille de façon constante à la fois Firefox et Chrome.

Pour référence, le CSS complète

.wrapper {
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 200px;
  border: 4px solid green;
  margin-bottom: 20px;
}

.column-parent {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.column-child {
  flex: 0 0 100%;
  border: 2px solid red;
}

et HTML

<div class="wrapper">
  <p>Some content of unknown size</p>
  <div class="column-parent">
    <div class="column-child">
      Should be inside green
    </div>
    <div class="column-child">
      Should be outside green
    </div>
  </div>
</div>
InformationsquelleAutor Michal Charemza | 2015-08-11
  1. 15

    Comme indiqué dans Abhitalks réponse, il y a un bug (ou une interprétation différente de la norme) dans la façon Chrome poignées de la hauteur attribut ici.

    J'ai trouvé un hack qui travaille à la fois dans Chrome, FF et IE

    Le seul problème est que vous nie avoir autant de règles que possible, les enfants y sont.

    Le truc est de mettre le flex-direction de ligne, définissez le flex de base (qui est maintenant la largeur) à 100%, puis de traduire les éléments

    CSS:

    .container {
    border: solid 2px blue;
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filler {
    border: solid 1px black;
    flex: 0 0 80px;
    background-color: lightgreen;
    transition: flex 1s;
}

.container:hover .filler {
    flex: 0 0 40px;
}

.test {
    border: solid 1px red;
    flex: 1 0 25px;
    display: flex;
    flex-direction: row;
    position: relative;
}

.child {
    background-color: rgba(200, 0, 0, 0.26);
    flex: 0 0 100%; 
}

.child:nth-child(2) {
    background-color: rgba(255, 255, 0, 0.48);
    transform: translateX(-100%) translateY(100%);
}

.child:nth-child(3) {
    background-color: rgba(173, 216, 230, 0.28);
    transform: translateX(-200%) translateY(200%);
}

    HTML:

    <div class="container">
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="test">
    	   <div class="child">1</div>
    	   <div class="child">2</div>
    	   <div class="child">3</div>
    </div>
</div>

    Si il pourrait y avoir un autre enfant, vous avez besoin d'une nth-child(4) de la règle, et ainsi de suite

    J'ai ajouté un effet hover pour vérifier la façon dont la taille s'adapte

    • En fait, je suis accoudé sur la solution que vous avez posté au départ... pouvez-vous envoyer dans une autre réponse? Je pense qu'ils semblent suffisamment différentes pour justifier cela.
    • Salut ! Je vais diviser la réponse, et je vois que vous l'avez accepté... Maintenant je ne sais pas vraiment quoi faire. N'hésitez pas à modifier si vous le souhaitez 🙂
    • Je pense qu'il serait encore mieux de le découper, juste, car ils sont des solutions différentes. Je soupçonne que je vais d'attribution de la prime à celui que vous avez posté en premier.
    InformationsquelleAutor vals
  2. 19

    Ce qui semble être un bug avec Chrome. Similaires à ceux rapportés ici (question 428049) et peut-être liée à (question 346275).

    Cela dit:

    - Navigateurs sont censés résoudre les pourcentages sur le flex de l'élément de l'enfant, *si* son flex de base est défini. 
- Gecko est *toujours* résolution des pourcentages quel que soit le flex de base. 
- Chrome est *jamais* résolution des pourcentages, quel que soit le flex de base.

    Sommairement, Chrome n'est pas la résolution pour cent des hauteurs sur flex-élément de l'enfant (même si l'enfant est lui-même un flex-élément), tandis que tous les autres navigateurs n'.

    Cela peut être illustré dans l'extrait de code ci-dessous: (Violon ici)

    CSS:

    * { box-sizing: border-box; margin: 0; padding: 0; }
div.wrap {
    height: 120px; width: 240px; margin: 0px 12px;
    border: 1px solid blue; float: left;
    display: flex; flex-direction: column;    
}
div.parent {
    flex: 0 0 100%;
    border: 1px solid green; 
    display: flex; flex-direction: column;    
}
div.item {
    flex: 0 0 100%;
    border: 1px solid red;
}

    HTML:

    <div class="wrap">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
</div>
<div class="wrap">
    <div class="parent">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>

    La deuxième div doit montrer le même comportement que le premier. Les autres navigateurs (IE11, Edge, FF39) afficher correctement. Google Chrome ne parvient pas d'ici et ne permet pas de résoudre div.item correctement. Il a besoin d'une hauteur fixe sur son parent, sans laquelle il utilise min-content que sa hauteur et n'a donc pas de débordement.

    Alors que, dans le premier div, le div.items sont correctement réglés et dépassement de capacité en conséquence. C'est parce qu'il y a une hauteur fixe sur le parent (c'est à dire div.wrap)

    Solution Possible:

    Comme une solution de contournement, si vous êtes sûr d'avoir seulement deux éléments (p et div) à l'intérieur de votre enveloppe, alors vous pourriez leur donner un 50% hauteur. Vous devez fournir un height:50% à votre .column-parent. Chrome a besoin d'une hauteur fixe sur les parents comme démontré ci-dessus.

    Puis tout le travail que vous avez besoin.

    Démo Violon: http://jsfiddle.net/abhitalks/kqncm65n/

    Pertinentes CSS:

    .wrapper > p { flex: 0 0 50%; }  /* this can be on flex-basis */
.column-parent {
    flex: 1 0 auto; height: 50%; /* but, this needs to be fixed height */
    display: flex; flex-direction: column;
    border: 2px solid blue;
}
.column-child {
    flex: 0 0 100%;              /* this flex-basis is then enough */
    border: 2px solid red;
}

    PS: Il semble également y avoir des différences dans la manière jsfiddle et plnkr rendu. Je ne sais pas pourquoi, mais j'ai parfois des résultats différents!

    • HTML est correctement tapé dans ce violon. Quelle peut être la raison pour ne pas imprimer les valeurs?
    InformationsquelleAutor Abhitalks
  3. 10

    Ma réponse précédente est un hack qui exploite une configuration particulière de la mise en page voulu.

    Une autre façon, plus générale, de contourner ce Chrome bug est d'utiliser un élément intermédiaire dans la mise en page, et de définir cette taille de l'élément à l'aide de top: 0px et bottom: 0px. (au lieu de la hauteur: 100%) Il y a encore un bug dans la façon Chrome poignées de calcul, qui a besoin d'un faux de l'animation pour le faire ajuster correctement

    CSS:

    .container {
border: solid 2px blue;
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
position: relative;
}
.filler {
border: solid 1px black;
flex: 0 0 94px;
background-color: lightgreen;
transition: 1s;
}
.container:hover .filler {
flex: 0 0 50px;
}
.test {
border: solid 1px red;
flex: 1 0 25px;
display: flex;
flex-direction: row;
position: relative;
}
@-webkit-keyframes adjust2 {
0% {flex-basis: 100%;}
100% {flex-basis: 100.1%;}
}
.child {
background-color: rgba(200, 0, 0, 0.26);
width:  100%;
height: 100%;
flex: 1 0 100%;
-webkit-animation: adjust2 1s infinite; /* only needed for webkit bug */
}
.intermediate {
width:  100%;
position: absolute;
top: 0px;
bottom: 0px;
display: flex; 
flex-direction: column; 
}
.child:nth-child(n+2) {
background-color: rgba(255, 255, 0, 0.48);
}
.child:nth-child(n+3) {
background-color: rgba(173, 216, 230, 0.28);
}

    HTML:

    <div class="container">
<div class="filler"></div>
<div class="test">
<div class="intermediate">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>

    InformationsquelleAutor vals
  4. 8

    Que sur l'ajout de 100% pour le conteneur:

    .column-parent {
flex: 1 0 100%;
}

    Et flex-grow à 1 dans le contenu de l'élément sans réglage de flex de base:

    .column-child {
flex: 1 0 0;
}

    Voici à quoi il devrait ressembler: http://plnkr.co/edit/H25NQxLtbi65oaltNVax?p=preview

    • Ah pas tout à fait... Il y a aussi un nombre inconnu de l'enfant-éléments. Si il ya 3, cette technique ne fait pas ce que je voudrais qu'elle: plnkr.co/modifier/21KD5kuIw3yLKX2NL70l?p=preview .
    • Vous avez absolument raison. Si nous ne pouvons connaître le nombre d'éléments d'enfant à l'avance, ce genre de solutions de rechange ne fonctionnerait pas.
    InformationsquelleAutor E. Serrano