如何解决IE10 flexbox overflow bug

Question

有了这个结构

<div id="twitter">
  <div class="info">
    <div>
      <span>Tweets</span>
      <span class="count">561</span>
    </div>
    <div>
      <span>Followers</span>
      <span class="count">250</span>
    </div>
    <div>
      <span>Following</span>
      <span class="count">129</span>
    </div>
  </div>
</div>

和这个CSS

#twitter {
  width: 220px;
  padding: 10px;
  background: #10A4FA;
}
.info {
  display: flex;
  justify-content: space-around;
}
.info span {
  font-size: 14px;
}
.info span.count {
  font-size: 24px;
}

它显示在IE11和大多数浏览器中的顶部，但像IE10中的底部（在IE11 devtools中模拟）

Here is a codepen showing it.

我已尝试将max-width: 100%添加到.info，各种box-sizing和flex-grow内容，并添加ms前缀但我无法获取在IE10中表现

Answer 1

试试这个

.info > div{
 width: 33.33%
{

因为在IE10中支持项目的伸缩宽度。所以给它宽度为33.33％