css flexbox: même hauteur pour tous les éléments?

À l'aide de CSS et flexbox, je ne comprends pas comment donner la même hauteur pour les divs "a" et "b". J'ai besoin de b à devenir plus grand de façon à correspondre à la hauteur. En d'autres termes, la zone grise doit être aussi grande que la zone rouge.

J'avais cru comprendre que c'était assez pour mettre flex:1 à la fois a et b, dans l'ordre pour eux d'avoir la même hauteur. Mais il n'en est pas ainsi.

J'ai tenté de flex-basis:0 à deux "a" et "b", mais le contenu est tronqué. Je ne peux pas tronquer un, j'ai besoin de b à être élargie.

CSS:

#cont1{
    display:flex;
    flex-direction:column;
}

#a{
    background-color:red;
    flex:1;
}

#b{
    background-color:grey;
    flex:1;
}

HTML:

<div id="cont1">
    <div id="a">
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
    </div>
    <div id="b">
        short text
    </div>
</div>

JSFiddle version

Il est, par exemple, mais à l'aide de javascript 🙁 ... jsfiddle.net/wothbd5z/1

InformationsquelleAutor seguso | 2015-11-15

Si vous pouvez survivre sans flex, le positionnement peut le faire.

CSS:

#cont1{
}

#a{
    background-color:red;
    position: relative;
}

#b{
    background-color:grey;
    position: absolute;
    left: 0; top: 100%;
    width: 100%;
    height: 100%;
}

HTML:

<div id="cont1">
    <div id="a">
      <h1> title </h1>
      <h1> title </h1>
      <h1> title title title title title title title title title</h1>
      <div id="b">
        short text
      </div>
    </div>
</div>

InformationsquelleAutor LGSon

2

Spécifier une hauteur pour le conteneur flex.

Essayez ceci:
```
#cont { 
     display: flex;
     flex-direction: column;
     height: 400px;
}
```
Vous avez besoin pour créer un espace défini pour le flex, afin de les distribuer.

Mise à JOUR (sur la base des observations)

droit... voici ce que j'ai besoin pour atteindre: http://www.jsfiddle.net/s2b0v4ph (watch
sur grand écran, car il est un point d'arrêt)

et là est le problème: si la case n ° 2 est plus grande, l'alignement
est brisé entre la box #2 et encadré n ° 5: http://www.jsfiddle.net/s2b0v4ph/1

La mise en page fonctionne parfaitement, codé. Le flex éléments de la primaire conteneur flex (.flex-md) sont l'étirement de la pleine hauteur du conteneur. N'importe comment beaucoup de contenu que vous l'ajouter à la boîte n ° 1 ou la case no 2), la colonne contenant les boîtes de #5 et #6, sera égale hauteur.

Toutes les colonnes de la primaire conteneur flex (<div class="row flex-md" id="row-quadrati">) sont à la même hauteur, quel que soit le contenu de la quantité. http://jsfiddle.net/s2b0v4ph/1/

La raison que la case no 5 ne sont pas alignées avec la boîte #2 lorsque le contenu est ajouté, c'est que chacune de ces boîtes existe dans un autre flex contexte de formatage. En d'autres termes, les boîtes existent dans différents conteneurs flex.

Plus précisément, les boîtes de #1, #2 et #3 sont flex éléments de #quadr-col-1, et les boîtes de #4, #5 et #6 sont flex éléments de #quadr-col-2. Les deux #quadr-col-1 et #quadr-col-2 sont flex éléments de la primaire conteneur flex, doublant (imbriqué) conteneurs flex, eux-mêmes.

Parce que ces boîtes existent dans de séparer les conteneurs flex il n'y a aucune raison pour eux à part égale hauteur. Si vous souhaitez que le flex de l'égalité hauteur de la fonction à appliquer, de les mettre tous dans le même conteneur flex.
- merci mais cela va à l'encontre de l'objectif de l'aide de flexbox. Je ne connais pas la hauteur dépend de la largeur de la fenêtre du navigateur. quand j'ai rétrécir la fenêtre, le texte passe à la ligne et de la hauteur du récipient augmente.
- Ce n'est pas à l'encontre du but de flexbox. flex-grow et flex-shrink travail par la distribution de l'espace disponible dans le conteneur flex. Quelle est la hauteur du conteneur flex? Comment peut - flex distribuer de l'espace s'il ne sait pas combien il y a d'espace?
- flex pourrait simplement donner le conteneur le minimum hauteur telle que a et b ont la même hauteur...
- Pas sûr que je suis de vous suivre. Vous pourriez peut-être donner plus de détails à votre question, ou d'ajouter des images avant / après.
- bon... voici ce que j'ai besoin pour atteindre: jsfiddle.net/s2b0v4ph (regarder sur grand écran, car il est un point d'arrêt)
- et là est le problème: si la case n ° 2 est plus grande, l'alignement est brisé entre la box #2 et encadré n ° 5: jsfiddle.net/s2b0v4ph/1
- Merci, je comprends votre réponse, mais je ne vois pas comment je peux les mettre tous dans le même conteneur flex". Notez que sur les petits écrans, la boîte contenant 4,5,6 doit placer sur une autre ligne. sur les écrans, 5,6,2,3 doivent avoir la même hauteur.
- Oui, cela peut prendre quelques fondamentaux de la restructuration de votre code. Je ne suis pas d'utiliser bootstrap, c'est pourquoi je n'ai pas essayer de le faire moi-même; je ne suis pas sûr que je peux fournir la solution la plus efficace. Je vais prendre un coup d'oeil à nouveau ce soir après le travail
InformationsquelleAutor Michael_B

J'ai résolu le problème en javascript, mais je suis toujours intéressé par un css solution:

function computeMaxHeight(els) {
    var ht = 0;
    els.forEach(function (el) {
        var elht = el.height();
        if (elht > ht) {
            ht = elht;
        }
    });
    return ht;
}

function setMinMeight(els) {
    var maxht = computeMaxHeight(els);
    //console.log("here resize. maxht = " + maxht);

    els.forEach(function (el) {
        el.css('min-height', maxht);
    });

}

$(document).ready(function () {

    var els = [$("#non-porre-limiti"), $("#we-love-pagi"), $("#vuoto"), $("#pagiletter"), $("#pagi-focus")];

    $(window).on('resize', function () {
        setMinMeight(els);

    });

    setMinMeight(els);

});

violon: http://jsfiddle.net/s2b0v4ph/3/

InformationsquelleAutor seguso

-1

Le truc, c'est cette partie
```
.xyz {
  width: 70%;
  box-shadow: 0 0 30px;
  text-align:center;
  -webkit-flex: 9 0 0; 
  flex: 9 0 0; 
}
```
http://codepen.io/damianocel/pen/XmxmQE

Maintenant ces divs auront la même hauteur, peu importe l'ensemble des pages de hauteur.

Est-ce que vous avez cherché?
- intéressant, mais je veux la zone grise aussi grand que nécessaire pour correspondre à la hauteur de la zone rouge, mais pas plus. Dans votre code, hauteur:100vh fait le truc, mais en fait les cases plus élevé que nécessaire.
InformationsquelleAutor damiano celent

Vous devez vous connecter pour publier un commentaire.