Flexbox：负边距，为什么这样做？

Question

所以我正在玩一个布局，我偶然发现了一个很酷的技巧，但我不知道为什么会有效？链接到示例。

http://codepen.io/TaylorHuston/pen/NNjZqZ

<div id="container">
  <div id="left">
  </div>
  <div id="right">
    <button id="expand">Expand</button>
  </div>
</div>

.....

body {
  background-color: green;
}
#container {
  display: flex;
  background-color: white;
  width: 1300px;
  height: 500px;
  margin: 0px auto; 
}

#left {
  background-color: grey;
  width: 0;
  transition: all .2s ease;
}

#left.expanded {
  width: 300px;
}

#right {
  flex: 0 0 100%;
  margin-right: -400px;
}

....

$('#expand').click(function() {
  $('#left').toggleClass('expanded');
});

使用该代码，当您点击＆＃39;展开＆＃39;按钮，左列扩展到300px宽，右列超过300px。它实际上被推翻了，它并没有相应缩小。如果没有设置负边距，则没有任何反应，因为#right是100％宽度。为什么负边距允许#right在左边有东西的情况下被推动，但是当没有#t？t时，它实际上没有移动或影响它？