JSFiddle - React, Tailwind, and code Playground

HTML

<div id='flex'>
  <div id='a'>testa</div>
  <div id='b'>
   <div id='c'>test</div>
  </div>
</div>

CSS

#flex {
  display: flex;
  align-self: stretch;
  flex-flow: column;
  height: 300px;
  width: 100%;
}
#a {
  order: 1;
  flex: 0 1 auto;
  background-color: red;
}
#b {
  order: 2;
  flex: 1 1 auto;
  background-color: blue;
}
#c {
  float: left;
  margin: 5px;
  width:-moz-calc(100% - 10px);
  width:-webkit-calc(100% - 10px);
  height:-webkit-calc(100% - 10px);
  height:-moz-calc(100% - 10px);
  background-color: white;
  overflow-y: scroll;
 }