Flex-grow 2

Shows how to use flex-grow to make one child element fill the rest of the space.

HTML

<div id="flexbox">
  <div id="big">BIG</div>
  <div id="small">SMALL</div>
</div>

CSS

#flexbox {
  display: flex;
  
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

#big {
  flex-grow: 5;
  
  background-color: lavender;
}
#small {
  /* flex-grow is 0 by default */
  
  background-color: lightblue;
}