Setting full height of Angular Components

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>