Flexbox项目在IE11及更低版本中不会彼此相邻显示

Question

我已阅读（https://github.com/philipwalton/flexbugs）IE11及更低版本中仍有许多针对flexbox的错误。现在我可能有一个可能没有列出的问题。

问题弹性项目不会彼此相邻显示，也不会考虑给定的弹性基础百分比。

我的代码:(带有来自autoprefixer依赖的前缀）

 .flex-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
 }

 .flex-item {
  -webkit-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-flex-basis: 30%;
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
 }

HTML

<div class="flex-container">
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
</div>

以上代码是基础知识的基础，甚至不起作用。除了上面提到的错误之外，IE11中的flexbox还有什么问题吗？

当我使用我的完整代码时，在IE11上的codepen中工作正常。这让我很奇怪......

提前致谢