フレックスボックスを使用して親の高さを常に埋める方法は？

Question

I次のようなHTMLがあります。

<div class="admonition info"> 
    <p class="admonition-title">Info</p> 
    <p>Text here</p> 
</div> 

とCSSを：

.admonition { 
    border: 1px solid red; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.admonition > p { 
    margin: 0; 
    padding: 6px; 
    display: block; 
} 

.admonition-title { 
    background-color: #2B83BD; 
    color: #fff; 
    display: block; 
    padding: 2px; 
} 

.admonition > .admonition-title { 
    font-size: 1px; 
    letter-spacing: -1px; 
    color: transparent; 
    width: 64px; 
    text-align: center; 
    vertical-align: middle; 
    min-width: 60px; 
} 

.admonition > .admonition-title:before { 
    font-family: "FontAwesome"; 
    font-size: 32px; 
    letter-spacing: normal; 
    color: #fff; 
} 

.admonition.info > .admonition-title:before { 
    content: "\f129"; 
} 

.admonition.info > p:not(.admonition-title) { 
    background-color: #7DBAE3; 
} 

.admonition.info > .admonition-title { 
    background-color: #2B83BD; 
} 

私は次の制約で子供をレンダリングしたいと思います：彼らは、縦方向にセンタリングされ

• 高さが等しくない場合は、ギャップを埋めるために伸ばしてください

白のギャップが、私は避けたいものです。 Live on JSFiddle

HTMLはマークダウンから生成されており、実際に構造を制御することはできません。これは簡単な方法で実装できますか？ Javascript、jqueryもOKですが、私はCSSでこれを行うことを好むでしょう。

Answer 1

align-items: stretch;を使用して、アイテムを親の高さに塗りつぶすだけです。

次に、あなたのアイコンを手動でセンタリングする必要があり、私はそれを行っているでしょう：

.admonition > .admonition-title { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

https://jsfiddle.net/4mw8a08x/