Element is not horizontally positioned in IE11 with Flexbox when parent has flex flow: column wrapper;

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 assumed it would work because if max-width

u are margin: 0 auto

installed. But as you can see it is not horizontal because its parent .thing

has flex-flow: column wrap

.

Any ideas to fix this in this setup?

PS Works in Chrome / FF