Почему сокращенное свойство flex ведет себя иначе, чем свойства длинной руки в IE?

Question

flex должен быть сокращением для flex-grow, flex-shrink, а также flex-basis, Но они, кажется, не ведут себя одинаково, когда в одном из элементов нет содержимого. Кто-нибудь может сказать мне, почему это так, и если есть способ заставить стенографию работать? (Я работаю в IE)

Посмотреть пример скрипки.

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;
}