Flexbox Not Centering Vertically in IE

Question

I have a simple web page with some Lipsum content that is centered on the page  The page works fine in Chrome and Firefox  If I reduce the size of the window  the content fills the window until it can t and then adds a scroll bar and fills content off screen  toward the bottom    However  the page doesn t center in IE11  I can get the page to center in IE by flexing the body  but if I do  then the content starts to go off screen towards the top and cuts off the top of the content   Below are the two scenarios  See the associated Fiddles  If the problem isn t evident right away  reduce the size of the result window so that it s forced to generate a scroll bar   Note  This application only targets the latest versions of Firefox  Chrome and IE  IE11   which all have support for the Candidate Recommendation of Flexbox  so feature compatibility shouldn t be an issue  in theory    Edit  When using the Fullscreen API to fullscreen the outer div  all browsers correctly center using the original CSS  However  upon leaving the fullscreen mode  IE reverts back to being horizontally centered and vertically top aligned    Edit  IE11 uses non-vendor specific implementation of Flexbox  Flexible box   Flexbox   layout updates    Centers and Resizes Correctly in Chrome FF  Does Not Center But Resizes Correctly in IE11  Fiddle  http   jsfiddle net Dragonseer 3D6vw   html  body       height  100       width  100      body       margin  0      outer       min-width  100       min-height  100       display  flex      align-items  center      justify-content  center      inner       width  80         Centers Correctly in Everywhere  Cuts Off Top When Sized Down  Fiddle  http   jsfiddle net Dragonseer 5CxAy   html  body       height  100       width  100      body       margin  0      display  flex      outer       min-width  100       min-height  100       display  flex      align-items  center      justify-content  center      inner       width  80

User · Answer

I don t have much experience with Flexbox but it seems to me that the forced height on the html and body tags cause the text to disappear on top when resized-- I wasn t able to test in IE but I found the same effect in Chrome   I forked your fiddle and removed the height and width declarations   body       margin  0      It also seemed like the flex settings must be applied to other flex elements  However  applying display  flex to the  inner caused issues so I explicitly set the  inner to display  block and set the  outer to flex for positioning   I set the minimum  outer height to fill the viewport  the display  flex  and set the horizontal and vertical alignment    outer       display flex      min-height  100       min-height  100vh      align-items  center      justify-content  center      I set  inner to display  block explicitly  In Chrome  it looked like it inherited flex from  outer  I also set the width    inner       display block      width  80       This fixed the issue in Chrome  hopefully it might do the same in IE11  Here s my version of the fiddle  http   jsfiddle net ToddT 5CxAy 21

User · Answer

This is a known bug that appears to have been fixed internally at Microsoft   https   connect microsoft com IE feedback details 802625 min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

User · Answer

Just in case someone gets here with the same issue I had  which is not specifically addressed in previous comments   I had margin  auto on the inner element which caused it to stick to the bottom of it s parent  or the outer element   What fixed it for me was changing the margin to margin  0 auto

User · Answer

Found a good solution what worked for me  check this link https   codepen io chriswrightdesign pen emQNGZ  editors 1100 First  we add a parent div  second we change min-height 100  to min-height 100vh  It works like a charm      by having a parent with flex-direction row      the min-height bug in IE doesn t stick around   flashy-content-outer        display flex      flex-direction row     flashy-content-inner       display flex      flex-direction column      justify-content center      align-items center      min-width 100vw      min-height 100vh      padding 20px      box-sizing border-box     flashy-content       display inline-block      padding 15px      background  fff

User · Answer

The original answer from https   github com philipwalton flexbugs issues 231 issuecomment-362790042   flex-container  min-height 100px  display flex  align-items center      flex-container after  content     min-height inherit  font-size 0

User · Answer

i have updated both fiddles  i hope it will make your work done   centering      html  body       height  100       width  100      body       margin  0      outer       width  100       display  flex      align-items  center      justify-content  center      inner       width  80       margin  0 auto      center and scroll  html  body               height  100           width  100              body               margin  0          display flex              outer               min-width  100             display  flex          align-items  center          justify-content  center              inner               width  80       margin-top 40px      margin  0 auto

User · Answer

I found that ie browser have problem to vertically align inner containers  when only the min-height style is set or when height style is missing at all  What I did was to add height style with some value and that fix the issue for me   for example      outer              display  -ms-flexbox         display  -webkit-flex         display  flex             Center vertically           align-items  center            Center horizontaly           justify-content  center            Center horizontaly ie           -ms-flex-pack  center           min-height  220px           height 100px          So now we have height style  but the min-height will overwrite it  That way ie is happy and we still can use min-height   Hope this is helpful for someone

User · Answer

Try wrapping whatever div you have flexboxed with flex-direction  column in a container that is also flexboxed   I just tested this in IE11 and it works  An odd fix  but until Microsoft makes their internal bug fix external   it ll have to do   HTML    lt div class  FlexContainerWrapper  gt       lt div class  FlexContainer  gt           lt div class  FlexItem  gt               lt p gt I should be centered  lt  p gt           lt  div gt       lt  div gt   lt  div gt    CSS   html  body     height  100       FlexContainerWrapper     display  flex    flex-direction  column    height  100       FlexContainer     align-items  center    background  hsla 0 0  0   1     display  flex    flex-direction  column    justify-content  center    min-height  100     width  600px      FlexItem     background  hsla 0 0  0   1     box-sizing  border-box    max-width  100       2 examples for you to test in IE11  http   codepen io philipwalton pen JdvdJE http   codepen io chriswrightdesign pen emQNGZ

User · Answer

If you can define the parent s width and height  there s a simpler way to centralize the image without having to create a container for it   For some reason  if you define the min-width  IE will recognize max-width as well   This solution works for IE10   Firefox and Chrome    lt div gt     lt img src  http   placehold it 350x150   gt   lt  div gt   div       display  -ms-flexbox      display  flex      -ms-flex-pack  center      justify-content  center      -ms-flex-align  center      align-items  center      border  1px solid orange      width  100px      height  100px     img    min-width  10     max-width  100     min-height  10     max-height  100       https   jsfiddle net HumbertoMendes t13dzsmn

User · Answer

Here is my working solution  SCSS     item    display  flex    justify-content  space-between    align-items  center    min-height  120px     amp  after      content         min-height inherit      font-size 0

[internet-explorer] Flexbox Not Centering Vertically in IE

Examples related to internet-explorer

Examples related to css

Examples related to flexbox

Examples related to internet-explorer-11