flex-direction seems to break horizontal margin auto in Safari 10 - css

Question

I was trying to use flex-direction column along with margin: auto for a child element in Safari 10, but the horizontal margins don't seem to apply while they do in literally every other browser (Edge, Firefox, Chrome). Here's a quick repro:
http://jsfiddle.net/paostj73/
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
}
.to-center {
margin: auto;
}
It looks like this in Safari:
And like this in Chrome:
I know that setting align-items is a workaround, but unfortunately, it also happens to break other parts of my layout. Is there another way to fix this, and is this already a known issue?

Answer 1

This is an issue IE has, and if I'm not mistaken Safari too, caused by the align-items default value stretch, which stretch the element to full width and fail to apply the auto margin.
To keep the default, align-items: stretch for all items but the to-center element, add align-self: center to its rule
html, body {
height: 100%;
margin: 0;
}
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
}
.to-center {
margin: auto;
align-self: center; /* added, fix for IE and Safari */
}
<div class="center-pls">
<div class="top-nav">
aaa aaa aa
</div>
<div class="to-center">
aaaa
</div>
</div>
Based on how the other elements are suppose to render, setting align-items: flex-start to the center-pls, will also work, though then the other elements might need width: 100% set, so they stretch and fill their parent's width.
html, body {
height: 100%;
margin: 0;
}
.center-pls {
display: flex;
height: inherit;
flex-direction: column;
align-items: flex-start; /* added, fix for IE and Safari */
}
.to-center {
margin: auto;
}
<div class="center-pls">
<div class="top-nav">
aaa aaa aa
</div>
<div class="to-center">
aaaa
</div>
</div>