当 parent 具有 flex-flow 时，元素在带有 Flexbox 的 IE11 中未水平居中：列换行；

Question

JSFiddle Link

.thing {
 background-color: tomato;
 max-width: 300px;
 padding: 30px;
 display: flex;
 margin: 0 auto;
 flex-flow: column wrap;
}

.not-centered {
 max-width: 150px;
 background-color: #fefefe;
 margin: 0 auto;
}

<div class="thing">
 <div class="not-centered">
  im not centeredi in ie11
 </div>
</div>

我认为它可以工作，因为如果设置了 max-width 和 margin: 0 auto。但是正如你所看到的，它不是水平居中的，因为他的 parent .thing 有 flex-flow: column wrap.

有什么想法可以在此设置中解决此问题？

P.S. 在 Chrome/FF

工作

Answer 1

将 .not-centered 包装在具有 block 显示的 div 中解决了 IE11 中的问题

当 parent 具有 flex-flow 时，元素在带有 Flexbox 的 IE11 中未水平居中：列换行；

Element is not horizontally centered in IE11 with Flexbox when parent has flex-flow: column wrap;

css

flexbox

internet-explorer-11

JSFiddle Link