为什么速记flex属性的行为与IE中的长手属性不同？

Question

flex应该是flex-grow，flex-shrink和flex-basis的简写。但是当其中一个项目中没有任何内容时，他们似乎表现不一样。任何人都可以告诉我为什么会这样，如果有办法使速记工作？ （我在IE工作）

View fiddle example.

HTML

<div class="container">
  <div class="longhand red">
    <p>Some content</p>
  </div>
  <div class="longhand blue">
  </div>
</div>

<div class="container">
  <div class="shorthand red">
    <p>Some content</p>
  </div>
  <div class="shorthand blue">
  </div>
</div>

CSS

.container{
  display: flex;
}

.longhand{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.shorthand{
  flex: 1 1 0;
}

.red{
  background-color: red;
}

.blue{
  background-color: blue;
}