Flexbox正在增加它拥有的更多项目，但不应该

Question

我有一个包含3个项目的flexbox容器。

中间的一个是静态内容，不应该增长或缩小，只需采用其自然尺寸。

正确的一个应该占用至少300px的空间，然后与左边的一个一起生长以填充剩余的空间（左边一个应该占剩余空间的80％，右边一个占20％）。

现在左边的是一个小问题。它是另一个flex容器，它包含一个可以增长和缩小的动态项目列表。它的物品也应该包裹起来。

然而，当我向左侧容器添加项目时，容器开始增长，但我既不理解为什么会这样，也不知道如何防止它。

任何线索？

编辑：我注意到这在Edge和FF中运行得很好。只有Chrome有这个问题。我的Chrome版本是59.0.3071.104。

段：

＆＃13;

＆＃13;

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
  display: 'flex',
  justifyContent: 'space-between',
  boxSizing: 'border-box'
};

const leftStyles = {
  border: '1px solid black',
  flex: '8 1 auto'
};
const leftInnerStyles = {
  display: 'flex',
  flexWrap: 'wrap',
  maxHeight: 72,
  overflowY: 'auto'
}
const midStyles = {
  border: '1px solid black',
  marginLeft: 6,
  flex: '0 0 auto'
};
const rightStyles = {
  border: '1px solid black',
  flex: '2 1 auto',
  minWidth: 300,
  marginLeft: 6
};

const itemStyles = {
  marginRight: 8,
  marginTop: 5,
  height: 28,
  border: '1px solid #C8C8C8',
  minWidth: 100,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: [1, 2, 3] };
    this.add = this.add.bind(this);
    this.sub = this.sub.bind(this);
  }

  add () {
    this.setState({
      items: this.state.items.concat(
        this.state.items.length === 0
          ? 1
          : Math.max(...this.state.items) + 1
      )
    });
  }
  
  sub () {
    this.setState({
      items: this.state.items.slice(0, this.state.items.length - 1)
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.add}>Add item</button>
        <button onClick={this.sub}>Sub item</button>
        <div style={styles}>
          <div style={leftStyles}>
            I should not grow when more items are added
            <div style={leftInnerStyles}>
              {this.state.items.map(item =>
                <div key={item} style={itemStyles}>{item}</div>
              )}
            </div>
          </div>
          <div style={midStyles}>Other content<br/>I should not change size</div>
          <div style={rightStyles}>I shrink down to 300px</div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

＆＃13;

＆＃13;