複数の角型コンポーネントでFlexboxを使用する

Question

現在、Semantic-UIを使用するAngularを使用してプロジェクトを作成しようとしています。

私はフレキシボックス使用して、私のヘッダーとNAVは異なる構成要素である私のAppComponent、中に次のようなレイアウトを実装しようとしています：

私の.html：

<div class="app"> 
    <div class="app-header"> 
    <ucecmp-header></ucecmp-header> 
    </div> 
    <div class="app-section"> 
    <div class="app-nav"> 
     <ucecmp-nav></ucecmp-nav> 
    </div> 
    <div class="app-content"> 
     <div class="ui huge header">Hello {{name}}</div> 
    </div> 
    </div> 
</div> 

をと私の.css：

.app { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.app-header { 
    flex: 0 0 auto; 
} 

.app-nav { 
    flex: 0 0 250px; 
    order: -1; 
} 

.app-section { 
    flex: 1 0 auto; 
    display: flex; 
    flex-direction: row; 
} 

.app-content { 
    flex: 1; 
} 

私の問題はtです帽子は、私は私のヘッダーを重ね、私のナビゲーションやコンテンツを見ている：

私はフレキシボックスに非常に新しいですので、問題は明白であるかもしれません。誰も助けることができますか？前もって感謝します。

Answer 1

私はそれが次の.cssでの作業を取得するために管理：

.app { 
    display: flex; 
    height: 100vh; 
    flex-direction: column; 
    margin: 0; 
} 

.app-header { 
    flex: 0 0 48px; 
} 

.app-nav { 
    order: -1; 
} 

.app-section { 
    display: flex; 
    flex: 0 0 auto; 
} 

.app-content { 
    flex: 1; 
}