CSS fill left and right divs while the center div has fixed width

Question

I have three divs in a wrapper div and I'd like to fill left and right divs when the center div has a fixed size, no matter the wrapper size.

So, the result I want is something like the below image.

How can I do this?

.wrapper{
  background-color: red;
  height: 200px;
  width: 100%;
  display:flex;
  flex-direction:row;
}
.left{
  background-color: blue;
}
.center{
  background-color: yellow;
  width: 200px;
  margin-left:auto;
  margin-right:auto;
}
.right{
  background-color: blue;
}

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

Answer 1

Add flex-grow: 1; to both the left and right divs:

.wrapper{
  background-color: red;
  height: 200px;
  width: 100%;
  display:flex;
  flex-direction:row;
}
.left{
  background-color: blue;
}
.center{
  background-color: yellow;
  width: 200px;
  margin-left:auto;
  margin-right:auto;
}
.right{
  background-color: blue;
}

.left, .right {
flex-grow: 1;
}

<div class="wrapper">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

Answer 2

With grid layout this would be really easy:

.wrapper{
   display: grid;
   grid-template-columns: 1fr 200px 1fr;
}