将组件的大小限制为包含div的高度

Question

我的布局包含顶部的工具栏，左侧的侧边，其余的是内容。

sidenav包含搜索框和项目列表。 我想要的结果是sidenav高度将是它所在行的大小，并且列表将溢出并在该高度内滚动。 但是我无法使内部滚动起作用，因为内部组件的高度大于包含div的高度，并且设置height: 100%不起作用。

这就是它现在的样子：

您可以看到左侧的整个组件溢出（我想删除overflow: hidden的外部滚动overflow: hidden在最后），内部组件只是缩放到完整大小，列表大小不限于组件hieght，因为它不仅限于它包含div的高度。

这是HTML和CSS的：

logs.component.html

<div class="container">
  <div class="row">
    <div class="col-3" color="primary" class="sidebar-container">
      <app-search-sidebar (selectedChanged)="selected=$event" [items]="items"></app-search-sidebar>
    </div>
    <div class="col">
      <md-tab-group>
        <md-tab [label]="selected">
          <h1>{{selected}}</h1>
          <p>...</p>
        </md-tab>
      </md-tab-group>
    </div>
  </div>
</div>

logs.component.css

.row {
    width: 100%;
    margin: 0;
}

.row > .col* {
    padding: 0;
}

.container {
    display: flex;
    height: 100%;
    width: 100%;
    padding: 0;
    min-height: calc(100% - 64px);
    max-height: calc(100% - 64px);
}

app-search-sidebar {
    overflow-y: auto;
    display: block;
    height: 100%;
}

.sidebar-container {
  min-width: 300px;
  /*max-width: 300px;*/
}

.container > md-tab-group {
  margin-left: 10px;
  flex: 1;
}

搜索sidebar.component.html

<div style="padding: 10px">
  <label class="sr-only" for="processName">Process Name</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon">
      <md-icon>search</md-icon>
    </div>
    <input type="text" [(ngModel)]="searchValue" class="form-control" id="processName" placeholder="Process Name">
  </div>
  <md-grid-list cols="1" rowHeight="40px" style="margin-top: 5px; overflow: scroll">
    <md-grid-tile *ngFor="let item of items | listFilter:searchValue" colspan="1" rowspan="1">
      <button md-raised-button [color]="isSelected(item) ? 'primary' : ''" class="process-name" (click)="changeSelected(item)">
        {{item}}
      </button>
    </md-grid-tile>
  </md-grid-list>
</div>

搜索sidebar.component.css

.process-name {
    width: 100%;
    color: white;
    text-align: center;
    border-radius: 4px;
}

md-grid-list {
    min-height: calc(100% - 24px);
    max-height: calc(100% - 24px);
}

Answer 1

md-grid-list::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}