How to selectively control the responsiveness of Flex items?

I have a flex container with 3 flex items. I want to make it such that:

• when you compress/shrink/reduce the width of the container, the middle item's width will also shrink, until it's width is 0px.

• when you extend/grow/increase the width of the container, the middle item's width will also grow, until it's width is 400px.

• the width of the left and right flex items remain 400px each, regardless of the width of the container.

I've tried using the flex-shrink, flex-grow and flex-basis properties, and the left and right items remain constant (good!) while the middle item's width resizes between 164px and 400px. I want it such that the middle item's minimum width is 0px, not 164px.

Here's what I've tried so far:

<div id="flex-container">
  <div id="item-1"></div>
  <div id="item-2"></div>
  <div id="item-3"></div>
</div>

And the CSS:

#flex-container {
  min-width: 800px;
  max-width: 1200px;
  height: 300px;
  display: flex;
  justify-content: center;
}

#item-1 {
  height: 300px;
  width: 400px;
  background-color: red;
  flex: 0 0 auto;
}

#item-2 {
  height: 300px;
  min-width: 0px
  max-width: 400px;
  background-color: green;
  flex: 1 1 auto;
}

#item-3 {
  height: 300px;
  width: 400px;
  background-color: blue;
  flex: 0 0 auto;
}

Thank you!