CSS

creating a static flex container with scrolling child element

* {
  margin: 0;
  padding: 0;
}
header {
  background: red;
  height: 10vh;
}
main {
  background: green;
  display: flex;
  height: 90vh;
}
.left {
  background: yellow;
  flex: 0 0 50px;
  margin: 10px;
}
.right {
  background: blue;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.sub-header {
  background: #999999;
  margin: 10px;
}
.context {
  background: white;
  overflow-y: scroll;
  margin: 0 10px 10px;
}
.context > div {
  height: 3000px;
}