Css 将组件大小限制为包含div'；s高度

我有一个布局，上面有一个工具栏，左边有一个sidenav，剩下的是内容

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

height:100%

不起作用

这就是它现在的样子：

您可以看到，左侧的整个组件都溢出了（我想删除最后带有

溢出：hidden

的外部滚动条），内部组件只是扩展到完整大小，列表大小不限于组件hight，因为它不限于包含div的高度

以下是HTML和CSS：

logs.component.html search-sidebar.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>

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

<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>

.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);
}

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