ブートストラップ4フレキシボックスの内容が100％の高さ

Question

私はフレキシボックスを有効にしていると私は列の内容が100％の高さになりたいブートストラップ4.

といくつかの問題を抱えています。

これは構造体である：

<div class="row"> 
<div class="col-md-6 col-xs-12"> 
    <div class="content"> 
    </div> 
</div> 
</div> 

は、これが結果です： Flexbox

どのように灰色の背景には、100％の高さになることができますか？私は高さで試した：100％。しかし、コンテナは列の高さではなくページの100％の高さになります。私はまた親を親に、子を絶対に設定しようとしました。働いていない。 コンテンツの背景色が設定されています。

Codeexample： http://jsfiddle.net/KjGZw/339/

Answer 1

あなたは.colのdivにdisplay:flexとフレックスコンテナを作成し、それらにflex-direction:columnを適用する必要があります。

そしてflex:1

.row { 
 
    height: auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.col { 
 
    padding: 15px; 
 
    flex: 1 1 25%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    background: purple; 
 
    color: white; 
 
    padding: 15px; 
 
    flex: 1; 
 
} 
 
*, 
 
:after, 
 
:before { 
 
    box-sizing: inherit; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
     <br />Test 
 
     <br />Test 
 
     <br />Test 
 
     <br />Test 
 
     <br /> 
 

 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
     <br>Test 
 
     <br>Test 
 
     <br>Test 
 
     <br> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="content"> 
 
     Test 
 
    </div> 
 
    </div> 
 
</div>

に .content divを設定します