コンテナの高さを満たすためにフレックスチャイルドを伸ばす方法は？

Question

私は親のすべての高さを埋めるために黄色の子供を伸ばす必要があります。親の高さを設定しないでください。親の身長は、青い子供のテキストに依存する必要があります。 https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'> 
 
    <div style='background-color: yellow;height: 100%; width: 20px'> 
 
    </div> 
 
    <div style='background-color: blue'> 
 
    some<br> 
 
    cool<br> 
 
    text 
 
    </div> 
 
</div>

Answer 1

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    align-items: stretch; // <-- stretch vertical 
 
    align-content: center; 
 
} 
 

 
.box { 
 
    padding: 1em; 
 
    text-align: center; 
 
    margin: 1em; 
 
} 
 

 
.box--yellow { 
 
    background-color: yellow; 
 
} 
 

 
.box--blue { 
 
    background-color: blue; 
 
    color: white; 
 
}

<div class="flexbox"> 
 
    <div class="box box--yellow"> 
 
    yellow 
 
    </div> 
 
    <div class="box box--blue"> 
 
    some<br> 
 
    cool<br> 
 
    text 
 
    </div> 
 
</div>

フレキシボックスを使用して、主要な間違いは、すべての上 height: 100%を使用して起動することです。

多くの場合、Flexboxには慣れていますが、多くの場合、Flexboxには壊れやすいことがあります。

解決方法は簡単です。height: 100%を削除すると、自動的に機能します。

それがない理由は、行方向（デフォルト）、align-items制御上下挙動にフレックス項目ためのものであり、そのデフォルトとして、これは単にあるとして働くstretchあります。

スタックは

<div style='display: flex'> 
 
    <div style='background-color: yellow; width: 20px'> 
 
    </div> 
 
    <div style='background-color: blue'> 
 
    some<br> 
 
    cool<br> 
 
    text 
 
    </div> 
 
</div>

Answer 2

<div style='display: flex'> 
 
    <div style='background-color: yellow; flex: flex-grow; width: 20px'> 
 

 
    </div> 
 
    <div style='background-color: blue'> 
 
    some<br> 
 
    cool<br> 
 
    text 
 
    </div> 
 
</div>

黄色の子属性にflex: flex-grow;を追加します。

Answer 3

ここに行く：私が正しく理解している場合

<div style='display: flex;'> 
 
    <div style='background-color: yellow; flex: none auto; width: 20px'></div> 
 
    <div style='background-color: blue'> 
 
    some<br> 
 
    cool<br> 
 
    text 
 
    </div> 
 
</div>

Answer 4

を、あなたは縦に、この場合には、クロス軸に沿ってレイアウトを定義align-itemsプロパティ、探しています。

あなたはここで良いの概要を見つけることができます。