title: setting row height not to go below bottom of page bootstrap
body: <p>I'm trying to make a sidenav that will scale it's size based on window size.</p>
  
  <p>I'm giving it a list of items, which combined are taller than the window height. I want to make it a scrollable list, without setting max-height, but instead have it always be the window height.</p>
  
  <p>this is how it currently looks:</p>
  
  <p><a href="https://i.stack.imgur.com/ZKnyl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZKnyl.jpg" alt="bug"></a></p>
  
  <p>you can see that the window is scrolled down, and the sidenav scroll is disabled. I've tried many things, currently this is the state of my code:</p>
  
  <h3>logs.component.html</h3>
  
  <pre><code>&lt;div class="container" [style.max-height]="containerHeight()" (window:resize)="resize($event.target.innerHeight)"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-2" color="primary"&gt;
        &lt;app-search-sidebar (selectedChanged)="selected=$event" [items]="items"&gt;&lt;/app-search-sidebar&gt;
      &lt;/div&gt;
      &lt;div class="col-10"&gt;
        &lt;md-tab-group&gt;
          &lt;md-tab [label]="selected"&gt;
            &lt;h1&gt;{{selected}}&lt;/h1&gt;
            &lt;p&gt;...&lt;/p&gt;
          &lt;/md-tab&gt;
        &lt;/md-tab-group&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>logs.component.css</h3>
  
  <pre><code>.container {
      width: 100%;
      min-height: 100%;
      overflow: hidden;
  }
  
  .row {
      height: 100%;
      margin-bottom: -9999px;
      padding-bottom: 9999px;
  }
  
  .row &gt; div {
      padding: 10px;
  }
  </code></pre>
  
  <h3>logs.component.ts</h3>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ProcessesList } from './mock_data';
  
  @Component({
    selector: 'app-logs',
    templateUrl: './logs.component.html',
    styleUrls: ['./logs.component.css']
  })
  export class LogsComponent {
  
    items: string[] = ProcessesList;
    selected: string = '';
    height: number;
  
  
    containerHeight(): number {
      return this.height &lt;= 0 ? window.innerHeight : this.height;
    }
  
    resize(height: number) {
      this.height = height;
    }
  }
  </code></pre>
  
  <p>this is a rather weird attempt, but it still doesn't help.</p>
  
  <p>the inner component:</p>
  
  <h3>search-sidebar.component.html</h3>
  
  <pre><code>&lt;div&gt;
    &lt;label class="sr-only" for="processName"&gt;Process Name&lt;/label&gt;
    &lt;div class="input-group mb-2 mr-sm-2 mb-sm-0"&gt;
      &lt;div class="input-group-addon"&gt;
        &lt;md-icon&gt;search&lt;/md-icon&gt;
      &lt;/div&gt;
      &lt;input type="text" [(ngModel)]="searchValue" class="form-control" id="processName" placeholder="Process Name"&gt;
    &lt;/div&gt;
    &lt;div class="process-list"&gt;
      &lt;md-list&gt;
        &lt;md-list-item *ngFor="let item of items | listFilter:searchValue"&gt;
          &lt;button md-raised-button [color]="isSelected(item) ? 'primary' : ''"
                  class="process-name" (click)="changeSelected(item)"&gt;
            {{item}}
          &lt;/button&gt;
        &lt;/md-list-item&gt;
      &lt;/md-list&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>search-sidebar.component.css</h3>
  
  <pre><code>.process-name {
      width: 100%;
  }
  
  .process-list {
      overflow-y: scroll;
  }
  </code></pre>
  
  <h3>search-sidebar.component.ts</h3>
  
  <pre><code>import { Component, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-search-sidebar',
    templateUrl: './search-sidebar.component.html',
    styleUrls: ['./search-sidebar.component.css']
  })
  export class SearchSidebarComponent {
    @Input() public items: string[] = [];
    @Output() selectedChanged: EventEmitter&lt;string&gt; = new EventEmitter&lt;string&gt;();
    private _selected: string = '';
    private searchValue: string;
  
    changeSearch(search: string) {
      this.searchValue = search;
    }
  
    isSelected(item: string) {
      return this.selected === item;
    }
  
    changeSelected(selected: string) {
      if (this.selected !== selected) {
        this.selected = selected;
      }
    }
  
    get selected() {
      return this._selected;
    }
    set selected(selected: string) {
      this._selected = selected;
      this.selectedChanged.emit(this.selected);
    }
  }
  </code></pre>
  
  <p>I'm using Angular Material 2 where I can, otherwise pure Bootstrap 4</p>