角4のフレックスボックスの問題

私は固定ヘッダーと固定サイドバーを持っている必要があります。私は別のHTML CSSでこれをやっています..私は完璧に動作します。角4のフレックスボックスの問題

私はここ

<body> 
    <header> 
     header 
    </header> 

    <section id="content"> 
     <div class="sidebar" style="color: #fff"> 
      sidebar 
     </div> 
     <div id="main_content"> 
      content 
     </div> 
    </section> 
</body>

SCSS

html, body { 
    height: 100%; 
} 

header { 
    background-color: yellow; 
    height: 80px; 
} 

#content { 
    background-color: #ccc; 
    flex: 1; 
    overflow: auto; 
    display: flex; 
} 
.sidebar { 
    width: 200px; 
    background-color: #000; 

} 
#main_content { 
    flex: 1; 
    width: 100%; 
    overflow: auto; 
} 

body { 
    display: flex; 
    flex-direction: column; 
}

にコードを貼り付けしかし、私はangular4するには、このコードを適用すると...それは仕事をdoesntの、それは狂気私を駆動します。これは私が何を書いたんreport.component.scssで

..私は私が書いたerlierスタイルを適用style.scssで

<header> 
    <app-header></app-header>  
</header> 

<section id="content"> 
    <div class="sidebar"> 
     <app-aside></app-aside> 
    </div> 
    <div id="main_content"> 
     <app-content></app-content> 
    </div> 
</section>

report.component.html

の私の角度コード

です.. 助けてくださいこの問題を確認するには、角張った角度でプロジェクタを作成し、問題を参照してください。

出典

2017-05-10 Vugar Ahmadov

すべての要素をdivにラップしますdiv："display：flex"。

出典

2017-05-12 07:21:51

これは魅力的な働きをしてくれました）ありがとうございました！ –

角4のフレックスボックスの問題

答えて

関連する問題