When incorporating the following html/css into a new Angular project created with Angular CLI using 'ng new ProjectName', I encountered issues. Despite adding the CSS to app.component.css or styles.css and the HTML to app.component.html, the Angular version seemed to be disregarding the specified height on the body. The header failed to stay fixed while scrolling in both the sidenav and content sections.
UPDATE: I discovered that removing the app-root tag from the Angular version resolved the problem. It's puzzling why the presence of app-root is causing this discrepancy.
Functional HTML/CSS:
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
#row2 {
display: flex;
flex: 1 0 0;
}
.header {
height: 64px;
background-color: red;
}
.sidenav {
flex: 0 0 250px;
background-color: yellow;
}
.main-content {
flex: 1 0 0;
background-color: blue;
}
.sidenav, .main-content {
overflow-y: scroll;
}<div id="row1">
<div class="header"></div>
</div>
<div id="row2">
<div class="sidenav"> Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>
</div>
<div class="main-content">
Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<br/>Testing<b...
Angular 2 Output: (It should be noted that in the css files, I added the css similar to the above snippet. Angular adds ngcontent tags to it and the additional flex styles are included via Chrome developer tools)
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
#row2[_ngcontent-c0] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
}
.header[_ngcontent-c0] {
height: 64px;
}
.sidenav[_ngcontent-c0] {
-webkit-box-flex: 0;
-ms-flex: 0 0 250px;
flex: 0 0 250px;
}
.main-content[_ngcontent-c0] {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
}
.sidenav[_ngcontent-c0], .main-content[_ngcontent-c0] {
overflow-y: scroll;
}<html><head>
<meta charset="utf-8">
<title>FlexTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root _nghost-c0="" ng-version="4.0.3">
<div _ngcontent-c0="" id="row1">
<div _ngcontent-c0="" class="header">HEADER</div>
</div>
<div _ngcontent-c0="" id="row2">
<div _ngcontent-c0="" class="sidenav">
Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngcontent-c0="">Testing<br _ngconten...