Comment obtenir flexbox alignez-les éléments de flex-end de travail dans WebKit/Blink?

Je suis en train de nest un flexbox dans un autre flexbox. L'extérieur de la boîte est verticale:

+------+
|      |
+------+
|      |
|      |
|      |
+------+

Où le haut de la zone s'adapte le contenu flex 0 1 auto et le fond de la moitié remplit l'espace restant flex 1 1 auto.

Dans la moitié inférieure, j'ai un autre flex-zone horizontale. Je veux les 2 boîtes intérieures à l'espace entre à travers et flex-end pour aligner des articles donc, fondamentalement, les 2 ampoules sont épinglés à gauche et à droite en bas des coins comme ceci:

+------+
|      |
+-+  +-|
|L|  |R|
+------+

Cette mise en place semble fonctionner dans Firefox, mais dans Chrome(Clin) et Safari-je obtenir ceci:

+------+
|      |
|      |
|      |
+-+--+-|
|L|  |R|
+-+  +-+

Voici le code HTML

<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>

Et il y a le CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;   
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}
#outer {
height: 100%;
border: 1px solid red;
display: flex;
display: -webkit-flex;
flex-flow: column;
-webkit-flex-flow: column;
justify-content: center;
align-content: center;
align-items: center;
-webkit-justify-content: center;
-webkit-align-content: center;
-webkit-align-items: center;
min-height: auto;    
}
#top {
width: 100%;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
border: 1px solid blue;
}
#bottom {
width: 100%;
height: 100%;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
border: 1px solid green;
}
#bottomcontents {
height: 100%;
width: 100%;
border: 1px solid pink;
display: flex;
display: -webkit-flex;
flex-flow: row;
-webkit-flex-flow: row;
justify-content: space-between;
align-content: center;
align-items: flex-end;
-webkit-justify-content: space-between;
-webkit-align-content: center;
-webkit-align-items: flex-end;
min-height: auto;        
}
#botleft, #botright {
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
#botleft {
border: 1px solid purple;
}
#botright {
border: 1px solid cyan;
}

Et voici un violon

Il fonctionne comme prévu dans Firefox. Ai-je fais quelque chose de mal? Est-ce un bug dans Chrome et Safari? Est-il une solution?

OriginalL'auteur gman | 2014-04-11

3

Fondamentalement, ce que vous voyez n'est que la "height: 100%;" sur #bottomcontents est de forcer le conteneur "en dehors" de ses environs de conteneurs. Le 100% de la hauteur finit par arriver à sa hauteur de son parent, qui a également 100% de la hauteur; ce qui signifie que la hauteur indiquée pour la #bottomcontents est mis à la même hauteur que #extérieure. Vous pouvez voir un peu plus clair que ça va au-delà de ce qu'il devrait, si vous ajoutez "overflow: hidden;" #bas. Une discussion plus approfondie de votre question peut être trouvée ici: vous êtes en cours d'exécution en est abordé ici: Hauteur de 100% sur flexbox colonne de l'enfant

Sauf si je suis absent de certains exigence que vous avez besoin, vous pouvez également supprimer le #bottomcontents récipient et de le faire juste avec #bas. Exemple de code (jsfiddle exemple en bas):

HTML:
```
<div id="outer">
    <div id="top">
        top
    </div>
    <div id="bottom">
        <div id="bottomcontents">
            <div id="botleft">
                bottom left
            </div>
            <div id="botright">
                bottom right
            </div>
        </div>
    </div>
</div>
```
CSS:
```
* {
box-sizing: border-box;
-moz-box-sizing: border-box;   
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}
#outer {
border: 5px solid red;
display: flex;
display: -webkit-flex;
height: 100%;
width: 100%;
flex-direction: column;
-webkit-flex-direction: column;
}
#top {
width: 100%;
border: 5px solid blue;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
#bottom {
width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
height: 100%;
border: 5px solid green;
align-items: flex-end;
-webkit-align-items: flex-end;
}
#left {
border: 5px solid purple;
padding: .5em;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
#right {
border: 5px solid cyan;
padding: .5em;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
```
Mon violon: http://jsfiddle.net/blake770/2br5x/

Hrm. Cela semble vraiment mal (je ne dis pas que vous avez tort, je dis que je ne comprends pas le rationnel). Dans mon exemple #bottom remplit ce qui est des restes de #outer une fois #top prend tout l'espace dont il a besoin. Si j'ai mis quelque chose à l'intérieur de #bottom et je le veux pour remplir l'espace dans #bottom alors j'aurais besoin de dire height: 100% dire "être à 100% de la taille de votre parent" qui est #bottom. Votre exemple de travaux à la charge de se débarrasser de #bottomcontents mais que faire si j'ai besoin de #bottomconents? J'ai lu la réponse que vous avez associé, je ne vois pas comment flex est utile comme specced.
Il y a quelques idées que vous pouvez jouer avec, ici, un violon de l'un comme exemple: jsfiddle.net/blake770/2br5x/1. J'ai ajouté un "#contenu" div entre #top et #bas, et régler la hauteur du fond à 0. Ceci peut vous permettre de donner un peu plus de séparation entre l'en-tête/contenu/pied de page que de jeter des choses dans #bottomcontents. Réglage de la hauteur de #inférieure à 0 montre encore à droite et à gauche des colonnes, mais il permet à la matière de contenu pour toujours "atteindre" le fond. Vous pouvez également ajouter un div entre le n ° à gauche et #droit et de la place du contenu, mais cela signifie que vous aurez une marge de chaque côté.

OriginalL'auteur Carl Blakemore

Vous devez vous connecter pour publier un commentaire.