Limiting size of component to containing div's

问题:

I have a layout which contains of a toolbar at the top, a sidenav on the left, and the rest is content.

The sidenav contains of a searchbox and a list of items. My desired outcome is that the sidenav height will be the size of the row it's in, and that the list will overflow and scroll inside that height. But I can't get the inner scroll to work, since the inner component's height is larger than the containing div's height, and setting height: 100% doesn't work.

This is how it looks right now:

You can see that the entire component on the left is overflowing (I want to remove the outer scroll with overflow: hidden in the end), and the inner component just scales to full size, and the list size isn't limited to the component hieght, since it's not limited to it's containing div's height.

This are the HTML's and CSS's:

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

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

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

回答1:

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