Setting full height of Angular Components - css

Question

I cannot get my list to be full height. My code is more complicated with nested components. But I can still get this to replicate using this code. Here is a plunk. http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
styles.css
html, body {
min-height: 100%;
height: auto;
margin: 0;
}
app.component.css
.container {
height: 100%;
background: black;
color: white;
list.component.css
.row {
display: flex;
flex-direction: row;
}
.list {
width: 33%;
height: 100%;
flex-direction: column;
display: flex;
border-right: groove white 1px;
border-top: groove white 1px;
}
.item {
width: auto;
height: 100%;
flex-direction: column;
display: flex;
}
list.component.html
<div class="contents">
<button (click)="updateDocuments()">Update Document</button>
<div class="row">
<div class="list">
<div *ngFor="let document of documents; let i = index;">
{{i + 1}}. {{document}}
</div>
</div>
<div class="item">
this is an item
</div>
</div>
</div>

Answer 1

I got this to work by switching to height 100vh and also adding a overflow-y: scroll css attribute to the list and item classes.
http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
styles.css
html, body {
min-height: 100vh;
height: auto;
margin: 0;
}
app.component.css
.container {
height: 100vh;
background: black;
color: white;
list.component.css
.row {
display: flex;
flex-direction: row;
}
.list {
width: 33%;
height: 100vh;
flex-direction: column;
display: flex;
border-right: groove white 1px;
border-top: groove white 1px;
overflow-y: scroll;
}
.item {
width: auto;
height: 100vh;
flex-direction: column;
display: flex;
overflow-y: scroll;
}
list.component.html
<div class="contents">
<button (click)="updateDocuments()">Update Document</button>
<div class="row">
<div class="list">
<div *ngFor="let document of documents; let i = index;">
{{i + 1}}. {{document}}
</div>
</div>
<div class="item">
this is an item
</div>
</div>
</div>

Answer 2

try to write this css
.container{
min-height:100vh;
}

Answer 3

Had the same issue, and found that the best solution was:
html, body {
min-height:100vh;
height: auto;
}
and for the container:
.container{
min-height: 100vh;
}

Answer 4

Use position: fixed if that's acceptable:
.container {
position:fixed;
background: black;
color: white;
height: 100%;
}

Answer 5

Hi everyone who faced this problem
Just go to global css file, it has the comment
/* You can add global styles to this file, and also import other style files */
written in it. Add
*{margin:0; padding:0}
that's it

Answer 6

Somewhere in the Internet:
The reason for this issue is concealed in the way a browser interprets
the host element, which doesn’t know it’s an HTML element at all and
so the browser sets the default display value (inline) for the host
element.
So probably it's enough just to redefine again "display" property for "host" tag (add in your component code) :
host: {
display: flex; /*or whatever is fit your needs*/
}

Answer 7

try in your style.css
html, body {
height: 100%;
margin: 0;
}