Flexの要素は、フレックスコンテナ

Question

で100％の高さを埋めるない私次のマークアップを持っている：

.container { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 

 
.col1 { 
 
    background: red; 
 
    height: 100%; 
 
    width: 50px; 
 
} 
 

 
.col2 { 
 
    background: blue; 
 
    flex: 1; 
 
    height: 200px; 
 
}

<div class="container"> 
 
    <div class="col1"></div> 
 
    <div class="col2"></div> 
 
</div>

そして、私はこのようにそれを期待してい：

しかし、ブラウザでレンダリングして検査すると、.col1の高さはです。 .col2はコンテナの高さをそのサイズに伸ばしているので、私はそれが200pxであると思っています。私は間違って何をしていますか？

Answer 1

のように、.col1からheight: 100%を削除します。

.container { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 
.col1 { 
 
    background: red; 
 
    width: 50px; 
 
} 
 
.col2 { 
 
    background: blue; 
 
    flex: 1; 
 
    height: 200px; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<div class="container"> 
 
    <div class="col1"></div> 
 
    <div class="col2"></div> 
 
</div>

・ホープ、このことができます：

.col1 { 
    background: red; 
    width: 50px; 
} 

は、以下のスニペットを見てください！