[CSS]Flexboxを入れ子にすると変な隙間ができてしまう

この現象に言及している記事が少ないため、解決法と隙間ができる理由を取りまとめておこうかと思います。 Flexboxを入れ子にするとできる変な隙間 下記のような、親Flexコンテナ＞親Flexアイテム＞子Flexコンテナ＞子Flexアイテム、と二重に入れ子になったFlexboxがあります。 <div class="parent-container"> <div class="parent-item"> <div class="child-container"> <div class="child-item"> あいうえお </div> </div> </div> </div> .parent-containerはflex-directionをcolumn方向に .parent-containerはflex-wrapをwrapに .child-itemはflex-basisで表示幅を100%よ