Почему свойство shorthand flex ведет себя иначе, чем свойства long hand в IE?

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

ОТВЕТЫ