No puedo hacer que mi lista sea de altura completa. Mi código es más complicado con componentes anidados. Pero aún puedo hacer que esto se replique usando este código. Aquí hay un plunk. http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
estilos.css
html, body { min-height: 100%; height: auto; margin: 0; }aplicación.componente.css
.container { height: 100%; background: black; color: white;lista.componente.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; }lista.componente.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>Conseguí que esto funcionara cambiando a la altura 100vh y también agregando un atributo overflow-y: scroll css a la lista y las clases de elementos.
http://plnkr.co/edit/R0QgLz8cjyRHYOLf4uJW
estilos.css
html, body { min-height: 100vh; height: auto; margin: 0; }aplicación.componente.css
.container { height: 100vh; background: black; color: white;lista.componente.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; }lista.componente.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>intenta escribir este css
.container{ min-height:100vh; }Tenía el mismo problema y descubrió que la mejor solución era:
html, body { min-height:100vh; height: auto; }y para el contenedor:
.container{ min-height: 100vh; }