flex-flowを持つ子要素のflex-basisが垂直に適用される理由：row nowrap？

Question

私はフルサイズになるクラス.primaryとflex-flow: column nowrap;の親要素を持っています。

次に、flex-flow: row nowrap;を適用するクラス.aaaの子要素を設定し、子孫を0に設定し、1に縮小し、flexベースを10remに設定しました。

しかし、それはflex-flow: row nowrap;ですが、flex-basisは、x-axisの代わりにy-axisに適用されます。どうして ？

.primary { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    flex: 1 1 auto; 
 
    background: green; 
 
} 
 
.aaa { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    flex: 0 1 10rem; 
 
    background: red; 
 
}

<div class="primary"> 
 
    <div class="aaa"> 
 
    <article> 
 
     article 
 
    </article> 
 
    <aside> 
 
     aside 
 
    </aside> 
 
    </div> 
 
</div>

Answer 1

flexプロパティは、Flexコンテナの子に適用されます。だから、このルールで

：

.primary { 
    display: flex; 
    flex-flow: column nowrap; 
    flex: 1 1 auto; 
    background: green; 
} 

... flexプロパティは何もしません。親（body）はフレックスコンテナではありません。

そして、このルールで：

.aaa { 
    display: flex; 
    flex-flow: row nowrap; 
    flex: 0 1 12rem; 
    background: red; 
} 

... .aaaは、カラム方向フレックスコンテナである、.primaryの子です。したがって、Y軸に沿ってflexプロパティが動作しています。