flexbox divise verticalement le conteneur en deux

Question

Quelqu'un peut-il me dire comment je peux faire en haut à droite conteneur et en bas à droite pour qu'il ait la même hauteur et pour qu'il soit divisé verticalement à 50-50 %. Quel que soit le contenu à l'intérieur. J'ai essayé d'étirer le contenu et de l'envelopper tout en conservant le format flex-direction: row de garder la même hauteur pour les éléments mais je suis perdu.

Ce que j'attends : en haut à droite Le conteneur a la même hauteur que le en bas à droite qui résulte également de la gauche le conteneur s'agrandit automatiquement, bien entendu.

Voici ce que j'ai jusqu'à présent : http://jsbin.com/rozoxoneki/edit?html,css,output

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}

<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
    </div>
  </div>
</div>

Answer 1

Intuitivement, on s'attendrait à ce que cela fonctionne de la même manière qu'un flex-direction: column pour le conteneur principal et la hauteur du conteneur de gauche est fixée à 100 %.

Au lieu de cela, tous les navigateurs font ceci : (ceci est une citation d'un autre question de stackoverflow )

Comment est-il possible que tous les principaux navigateurs aient obtenu que le conteneur flex soit s'étendre lors de l'enroulement dans le sens de la ligne mais pas dans le sens de la colonne ?

Vous pouvez donc regrouper les deux conteneurs de droite dans un nouveau conteneur :

Comme ce HTML - schema :

<div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

Voici un jsfiddle comme exemple de la manière dont vous pourriez le styliser pour obtenir le résultat escompté.

Dans cet exemple, le "main-container" est fixé à 50 % de la largeur et 75 % de la hauteur du corps.

Answer 2

La réponse acceptée n'est pas idéale pour l'utilisation des propriétés flexibles, parce que tout cela peut être fait sans avoir besoin de min-height o max-height

J'ai nettoyé le exemple de violon et supprimé les styles css non essentiels pour montrer quelles propriétés flex sont utilisées ici.

Pour obtenir un espacement régulier entre les divs haut et bas, vous devez soit spécifier la bonne valeur pour le paramètre flex-basis ou laisser la flexion se faire d'elle-même. En supposant que l'affichage du parent soit réglé sur flex avec une orientation en colonne, la combinaison de flex peut nous y conduire facilement :

.half-containers {
    flex: 1;
}

voir plus sur style flexible y el flex-basis propriété

Answer 3

En s'appuyant sur la réponse de Felipe, voici un exemple encore plus minimal de la façon de diviser un conteneur flex unique en deux verticalement. Chacun de ces styles a été confirmé comme étant significatif et nécessaire, à l'exception des deux en bas marqués optional .

(Ce qui m'a interpellé, c'est que chaque élément parent doit avoir un élément height: 100% ou l'ensemble est cassé).

HTML

<div id="container">
  <div class="row">This is the top.</div>
  <div class="row">This is the bottom.</div>
</div>

CSS

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  flex: 1;
}

/* optional: get rid of body margin. makes look nice. */
body {
  margin: 0;
}

/* optional: shade the bottom row */
.row:nth-child(2) {
  background: #bbb
}

CodePen en fonctionnement ici :

https://codepen.io/rbrtmrtn/pen/NyxeJE