フレックスボックス同等の高さ

Question

私はいくつかのflexboxの助けを必要としています。

私は、項目2と3の両方が利用可能なスペースを埋めるために伸ばした場合、私は希望列1

とheightで等しくなるように項目2と3を含む列を取得しようとしています。私はすべてを試しましたが、nothingsは動作しているようです。ここで

は、私はフレキシボックスの特性を有するようにブートストラップ3を拡張ブートストラップ3とフレキシボックスのグリッドを使用しています私のHTMLコード

<div class="container "> 
    <div class="row yellow"> 
    <div class="col-sm-6 pink"> 
    <h1>Item 1</h1> 
    ... 
    </div> 
    <div class="col-sm-6"> 
    <div class="row"> 
    <div class="col-sm-12 cyan"> 
     <h1>Item 2</h1> 
     ... 
    </div> 
     <div class="col-sm-12 green"> 
     <h1>Item 3</h1> 
      ... 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

です。フレームワークflexboxgridを使用せずに

CodePen Link

Flexbox Grid

Answer 1

、単純なプレーンflexbox

body, 
 
html { 
 
    height: 100% 
 
} 
 
.yellow { 
 
    background: yellow 
 
} 
 
.pink { 
 
    background: pink 
 
} 
 
.cyan { 
 
    background: cyan 
 
} 
 
.green { 
 
    background: green 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    height: 100% 
 
} 
 
.row, 
 
.col-xs-6 { 
 
    height: 100% 
 
} 
 
.col-xs-12 { 
 
    height: 50% 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container "> 
 
    <div class="row yellow"> 
 
    <div class="col-xs-6 pink"> 
 
     <h1>Item 1</h1> 
 
     ... 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 cyan"> 
 
      <h1>Item 2</h1> 
 
      ... 
 
     </div> 
 
     <div class="col-xs-12 green"> 
 
      <h1>Item 3</h1> 
 
      ... 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

はフレキシボックスグリッドもなくても、あまりにも難しいことではありませんHTを変更するMLマークアップ。

.row { 
    display: flex; 
} 

.col-sm-6 .row { 
    flex-direction: column; 
    height: 100%; 
    .col-sm-12 {flex: 1;} 
} 

https://codepen.io/anon/pen/pbojjQ