ネストされたフレックスボックスの場合、センタリングが失敗する

Question

この例では、ブラウザのウィンドウの高さが400ピクセル以下になると、イメージはスクロール可能領域の中央に表示されなくなります。

html { 
 
    height: 100%; 
 
} 
 
    
 
body { 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
    
 
#content { 
 
    height: 400px; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div id="content"> 
 
    <img src="http://placehold.it/300x300"> 
 
</div>

それはすぐに、私は、HTMLのか、体の一方または両方のheightプロパティの設定を解除として働きます。

この特定の例でセンタリングが失敗する理由を理解したいと思います。入れ子にされたフレックスボックスとは何か関係がありますか？あるいは、htmlとbodyの両方の高さを100％に設定するのに問題がありますか？それはバグか何かブラウザ関連ですか？

Answer 1

水平センタリング用のmargin: 0 auto（position: relativeと併用）と似ています。コンテナが中央の子よりも広い場合、子は中央に配置されます。しかし、コンテナ（またはボディ/ビューポート）が子よりも狭いとすぐに、子は左に揃えられ、スクロールバーが表示されます。そうすれば、子要素全体を見ることが常に可能になります。スクロールが有効になっている場合にのみ可能な、コンテナよりも大きいためです。

フレックスボックスと垂直方向のセンタリングでも同じことが起こります。親コンテナが子より小さく（つまり、高さが低く）子がスクロールバーなしでセンタリングされる場合は、上部と下部（テキストフィールドなどを入力する必要があるフォームの場合などに重要なことがあります）が表示され、これらの非表示部分をスクロールして表示することはできません。したがって、この状況（子供が親を上回る子供は、フレックスコンテナを中心に垂直に配置されます）では、子供は親の一番上に置かれ、下にスクロールすることができます。フォームの場合はフォーム全体を表示/入力してください。