Vugar Ahmadov Vugar Ahmadov - 5 months ago 27
Sass (Sass) Question

Flexbox issue in angular 4

I need to have fixed header and fixed sidebar.. I am doing this with flexbox in another html css.. I works perfect.

https://codepen.io/Vugar94/pen/bWLPLM

I paste the code in here

<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;
}


But when I apply this code to angular4.. it doesnt work and it drives me crazy. This is my angular code

in report.component.html

<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>


in style.scss I apply style that i wrote erlier..

in report.component.scss I wrote nothing..
please help me
If you want to check for this issue make a projet with angular-cli and see the problem

Answer Source

Inside report component wrap all elements into div with class "flex-container" than make the div "display: flex".That might help you ;)