设置角度组件的完整高度

我无法让我的列表成为全高。我的代码由于嵌套组件而更加复杂。但我仍然可以使用此代码来复制它。这是一个笨蛋。http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

样式.css

html, body {
  min-height: 100%;
  height: auto;
  margin: 0;
}

应用程序组件.css

.container {
height: 100%;
background: black;
color: white;

列表.组件.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;
}

列表.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>

我通过切换到高度 100vh 并向列表和项目类添加溢出-y:滚动 css 属性来实现此目的。

http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW

样式.css

html, body {
  min-height: 100vh;
  height: auto;
  margin: 0;
}

应用程序组件.css

.container {
height: 100vh;
background: black;
color: white;

列表.组件.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;
}

列表.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>