Flexbox item does not vertically align as expected when container has a fixed height in iE11

Question

I have a flexbox vertical align problem in IE11.

I have a flexbox container an a child. I have an image inside the item div.The image is bigger than the flex container, so I want to show the middle part of the image, using justify-content: center; This works as I expect in all browsers but IE11. The attached illustration should show the issue. Any help is appreciated.

<div class="container">
  <div class="item">
    <img src="image.jpg" />
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
  overflow: hidden;
}

Answer 1

IE11 is buggy when it comes to Flexbox, and in this case it doesn't what other browsers does.

When in a flex column direction, use transform: translate() to make it behave.

 .container { display: flex; flex-direction: column; justify-content: center; height: 200px; overflow: hidden; border: 1px dashed gray; } /* IE11 only */ _:-ms-fullscreen, :root .IE11Fix { position: relative; top: 50%; transform: translateY(-50%); }

 <div class="container"> <div class="item IE11Fix"> <img src="http://placehold.it/100x300/f00" /> </div> </div>

Answer 2

I think you are mistakenly using justify-content: center and flex-direction: column ;

In a flex column , The X axis alignment is controlled by align-items , and the Y axis alignment is controlled by justify-content

If you remove flex-direction: column and set your container to be align-items: center and justify-content: center , both work in the same way with the result you expected:

.container {
  display: flex;
  height: 200px;
  justify-content: center;
  align-items: center;
}

https://jsfiddle.net/s3Lmqndu/1/