Flex-basis

Shows how to use flex-basis to make one flexible element larger than the others.

HTML

<div id="flexbox">
  <div>NORMAL</div>
  <div id="large">LARGE</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
  <div>NORMAL</div>
</div>

CSS

#flexbox {
  display: flex;
  
  width: 100%;
  height: 300px;
  border: 1px solid black;
}
#flexbox div {
  flex-grow: 1;
  flex-basis: 50px;
  
  border: 1px solid purple;
  background-color: lavender;
}

#flexbox #large {
  flex-basis: 100px;
  
  background-color: lightblue;
}