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

Question

我有一个布局，其中包含顶部的工具栏，左侧的 sidenav，其余部分是内容。

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

这就是现在的样子：

可以看到左边整个组件都溢出了（我想把外层的滚动条去掉最后overflow: hidden），而内层的组件只是缩放到全尺寸，列表大小不受限制到组件高度，因为它不限于包含 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;
}

搜索边栏.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>

search-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;
}