div height rest of page

See: https://jsfiddle.net/kjtmq0us/2/

Suppose, we have a toolbar, and want to fill the remaining of the height of the page. You can do it as follows:

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: yellow;
  overflow: hidden;
}

.toolbar {
  background-color: red;
  height: 40px;
}

.theContent {
  background-color: blue;
  height: calc(100vh - 40px); 
  overflow: auto;
}



html:
<div class="baseFlex">
<div class="toolbar">Toolbar</div>
<div class="theContent">
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
</div>
</div>


css:

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: yellow;
  overflow: hidden;
}

.baseFlex {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}

.toolbar {
  background-color: red;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}

.theContent {
  background-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(100vh - 40px);
  overflow: auto;
}