FlexBox divisa verticalmente contenitore a metà

Question

Qualcuno può dirmi come posso fare destra contenitore alto e destra contenitore basso a avere la stessa altezza e di dividere il contenitore rosso 50-50% in verticale. Non importa quale sia il contenuto all'interno. Ho provato ad allungare il contenuto e ad averli avvolti mantenendo il valore di flex-direction: row per mantenere la stessa altezza degli oggetti, ma sono perso.

quello che mi aspetto: alto a destra contenitore cresce alla stessa altezza basso a destra che causa anche l'sinistra contenitore crescente automaticamente naturalmente.

Questo è quello che ho finora: 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

Intuitivamente ci si aspetterebbe che questo dovrebbe funzionare solo con un flex-direction: column per il contenitore principale e l'altezza del contenitore sinistra impostato a 100%.

Invece tutti i browser fare questo: (questa è una citazione da un altro stackoverflow question)

Come è possibile che tutti i principali browser hanno ottenuto il contenitore flessibile per espandersi su avvolgere in fila direzione, ma non nella colonna -direzione?

Che cosa si può fare è avvolgere i due contenitori giusti in uno nuovo:

Ti piace questa 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> 

Ecco un jsfiddle come un esempio di come si potrebbe stile per il risultato atteso.

In questo esempio il 'contenitore principale' è impostato su larghezza 50% e altezza 75% del corpo.

Answer 2

La risposta accettata non è l'ideale per l'uso di proprietà di flex, perché può essere fatto senza la necessità di min-height o max-height

ho ripulito le e rimossi gli stili non essenziali css per mostrare quali proprietà flex vengono utilizzate qui.

Per ottenere div al massimo/minimo uniformemente distanziati, è necessario specificare il valore corretto per flex-basis oppure lasciare che Flex lavori autonomamente. Supponendo che il display del genitore è impostato su flex con un orientamento colonna, il combinato flex stile può farci non facile:

.half-containers { 
    flex: 1; 
} 

vedere di più sul flex styling e la proprietà flex-basis

Answer 3

Sulla risposta di Felipe, ecco un esempio ancora più minimale di come dividere un singolo contenitore flessibile a metà verticalmente. Ognuno di questi stili è stato confermato significativo e necessario, ad eccezione dei due in basso contrassegnati con optional.

(Quello che mi ha fatto era che ogni elemento genitore ha bisogno di avere un set height: 100%, o il tutto si rompe.)

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 
} 

Working CodePen qui:

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