如何让<div>宽度在min-width与max-width间动态响应屏幕变化？

我希望蓝色背景的div在屏幕缩小时，宽度能从max-width逐渐减小到min-width，实现响应式效果。以下是我的HTML结构和CSS代码：

HTML代码 #

<div class="bar-container">
  <div class="left-bar">
    <div class="grey"></div>
  </div>
  <div class="right-bar">
    <div class="wrapper">
      <div class="red"></div>
      <div class="blue"></div>
    </div>
    <div class="yellow"></div>
  </div>
</div>

CSS代码 #

.bar-container {
  background-color: black;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

.left-bar {
  display: flex;
}

.right-bar {
  display: flex;
}

.grey {
  width: 100px;
  background-color: grey;
}

.wrapper {
  display: flex;
}

.red {
  width: 100px;
  background-color: red;
}

.blue {
  min-width: 100px;
  max-width: 200px;
  width: 100%;
  background-color: blue;
}

.yellow {
  width: 100px;
  background-color: yellow;
}

布局效果示意图 #

内容的提问来源于stack exchange，提问作者aikind