Flexbox auto margins don't work with justify-content: center in IE

Question

I have a table where a cell can contain a number of icons, as well as text. If icons are present, they appear to the left of the text. There are a couple of possible alignme

Answer 1

This work around of removing justify-content doesn't work for me. If you look at this example in IE11 you will see: Codepen example

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: white;
}

.item {
    margin: auto;
    width: 50px;
    height: 50px;
    background-color: red;
}