フレックスボックスを縦に分割した容器

Question

右上コンテナと右下コンテナの高さを同じにして、赤いコンテナを垂直方向に50-50％分割することができます。内容が何であっても。私はコンテンツを伸ばそうとしていると、彼らはアイテムのための同じ高さを維持するためにflex-direction: rowを維持しながらラップを持っているが、私は迷っています。

は、私が何を期待：右上コンテナもが自動的もちろん成長コンテナを残した結果右下のと同じ高さに成長します。

これは私がこれまで持っているものです：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

直感的に1本が100％に設定し、メインコンテナと左コンテナの高さのためだけflex-direction: columnで動作することを期待します。

代わりに、すべてのブラウザがこの操作を行います（これは別のstackoverflow questionからの引用である）、それはすべての主要なブラウザは、行方向にラップではなく列に拡大 にフレックスコンテナを持っている可能性がある方法

を-方向？

だから、何を行うことができますが、新しいものに右の2個のコンテナをラップです：

このHTMLと同じように - スキーマ：

<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> 

ここでは、スタイルができる方法の例としてjsfiddleですそれは期待される結果のためです。

この例では、 'main-container'は本体の幅50％、高さ75％に設定されています。

Answer 2

それがすべてmin-heightかmax-height

を必要とせずに行うことができますので、受け入れ答えは、私がをクリーンアップし、非本質的なCSSスタイルを削除した、Flexプロパティの使用を理想的ではありませんここでどのflexプロパティが使用されているかを示します。

均等間隔のトップ/ボトムdivを取得するには、flex-basisに適切な値を指定するか、flexを動作させる必要があります。組み合わせflexスタイルが簡単にそこに私たちを得ることができ、親のディスプレイは、カラム方向に曲がるように設定されていると仮定すると：

.half-containers { 
    flex: 1; 
} 

がflex stylingの詳細とフェリペの答えにflex-basisプロパティ

Answer 3

ビルを参照してください、ここにあります単一のフレックスコンテナを縦に半分に分割する方法のさらに小さな例です。これらのスタイルはそれぞれ、重要で必要なものであることが確認されていますが、下部の2つの部分はoptionalと表示されています。

（何私を得たことは、すべての親要素がheight: 100%セット、または全部ブレークを持っている必要がありますということでした。）

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 
} 

作業コード：

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