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

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>

I supposed it to work because if max-width and margin: 0 auto set. But as you can see, it is not horizontally centered because his parent .thing has flex-flow: column wrap.

Any ideas to fix this in this setup?

P.S. Works in Chrome/FF


Source: css3

Leave a Reply