Flexbox not working in Internet Explorer 11

Question

This piece of code works fine in Firefox  Chrome and Edge  but it does not work properly in IE11 because of flex model  apparently  How can I fix it   This is how it looks in Firefox    This is how it looks in IE11     x000D   x000D  body     x000D    box-sizing  border-box  x000D    x000D  html   x000D    height  100   x000D    x000D  body   x000D    min-height  100   x000D    display  flex  x000D    flex-flow  column  x000D    margin  0  x000D    x000D  main   x000D    flex  1  x000D    display  flex  x000D    x000D  header  x000D  footer   x000D    background   7092BF  x000D    border  solid  x000D    width  100   x000D    x000D  section   x000D    border  solid  x000D    background   9AD9EA  x000D    flex  1 x000D    x000D  aside   x000D    border  solid  x000D    width  150px  x000D    background   3E48CC x000D    x000D   lt header gt  x000D     lt p gt header x000D   lt  header gt  x000D   lt main gt  x000D     lt aside gt  x000D       lt p gt aside x000D       lt p gt aside x000D     lt  aside gt  x000D     lt section gt  x000D       lt p gt content x000D       lt p gt content x000D       lt p gt content x000D       lt p gt content x000D     lt  section gt  x000D   lt  main gt  x000D   lt footer gt  x000D     lt p gt footer x000D     lt p gt footer x000D   lt  footer gt  x000D   x000D   x000D

User · Answer

See  Can I Use  for the full list of IE11 Flexbox bugs and more  There are numerous Flexbox bugs in IE11 and other browsers - see flexbox on Can I Use -  Known Issues  where the following are listed under IE11    IE 11 requires a unit to be added to the third argument  the flex-basis property In IE10 and IE11  containers with display  flex and flex-direction  column will not properly calculate their flexed childrens  sizes if the container has min-height but no explicit height property IE 11 does not vertically align items correctly when min-height is used   Also see Philip Walton s Flexbugs list of issues and workarounds

User · Answer

I have tested a full layout using flexbox it contains header  footer  main body with left  center and right panels and the panels can contain menu items or footer and headers that should scroll  Pretty complex  IE11 and even IE EDGE have some problems displaying the flex content but it can be overcome  I have tested it in most browsers and it seems to work   Some fixed i have applies are  IE11 height bug  Adding height 100vh and min-height 100  to the html body  this also helps to not have to set height on container in the dom  Also make the body html a flex container  Otherwise IE11 will compress the view   html body       display  flex      flex-flow column nowrap      height 100vh     fix IE11        min-height 100      fix IE11          A fix for IE EDGE that overflows the flex container   overflow hidden on main flex container  if you remove the overflow  IE EDGE wil push the content out of the viewport instead of containing it inside the flex main container   main      flex 1 1 auto      overflow hidden     IE EDGE overflow fix            You can see my testing and example on my codepen page  I remarked the important css parts with the fixes i have applied and hope someone finds it useful

User · Answer

According to Flexbugs   In IE 10-11  min-height declarations on flex containers work to size the containers themselves  but their flex item children do not seem to know the size of their parents  They act as if no height has been set at all   Here are a couple of workarounds  1  Always fill the viewport   scrollable  lt aside gt  and  lt section gt    x000D   x000D  html     height  100      body     display  flex    flex-direction  column    height  100     margin  0     header  footer     background   7092bf     main     flex  1    display  flex     aside  section     overflow  auto     aside     flex  0 0 150px    background   3e48cc     section     flex  1    background   9ad9ea    x000D   lt header gt     lt p gt header lt  p gt   lt  header gt    lt main gt     lt aside gt       lt p gt aside lt  p gt     lt  aside gt     lt section gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt     lt  section gt   lt  main gt    lt footer gt     lt p gt footer lt  p gt   lt  footer gt  x000D   x000D   x000D   2  Fill the viewport initially   normal page scroll with more content   x000D   x000D  html     height  100      body     display  flex    flex-direction  column    height  100     margin  0     header  footer     background   7092bf     main     flex  1 0 auto    display  flex     aside     flex  0 0 150px    background   3e48cc     section     flex  1    background   9ad9ea    x000D   lt header gt     lt p gt header lt  p gt   lt  header gt    lt main gt     lt aside gt       lt p gt aside lt  p gt     lt  aside gt     lt section gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt       lt p gt content lt  p gt     lt  section gt   lt  main gt    lt footer gt     lt p gt footer lt  p gt   lt  footer gt  x000D   x000D   x000D

[html] Flexbox not working in Internet Explorer 11

See "Can I Use" for the full list of IE11 Flexbox bugs and more

Examples related to html

Examples related to css

Examples related to internet-explorer

Examples related to flexbox