1

I, like many others, am having trouble getting my flexbox page layout to work in IE11. My code validates just fine on the W3C Validator, and I added all the necessary prefixes. I read through the common issues with flexbox in IE11 as well, but couldn't seem to figure out where exactly the issue is for me or how to fix it.

How the homepage supposed to look

How another section is supposed to look

How the homepage looks in IE11

How the other section looks in IE11

And a link to my code (minus the parts that are working properly): https://jsfiddle.net/f09skq5w/

This is the CSS for the sections of the page, from what I read there can be issues with the min-height but I tried a few workarounds and none of the seemed to do the trick:

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 60px 50px;
  min-height: 100vh;
}

And then the code for the #projects section that you can see in the 2nd and 4th image.

#projects .grid li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
  text-align: center;
}

#projects .thumbnail-img {
  max-width: 100%;
  max-height: 100%;
  min-height: 235px;
  padding: 0 30px 25px;
}

Any advice is greatly appreciated.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Tim Wörner
  • 11
  • 3
  • Some pointers... add `left: 0` to `.home-content`. Add `width: 100%` to `.project-list`. Remove `flex-basis` property from `.about-caption`. ... let me know if it helps – sol Jan 09 '18 at 11:53
  • One thing you should keep in mind is that [**absolutely positioned children of a flex container do not participate in flex layout**](https://www.w3.org/TR/css-flexbox-1/#abspos-items). You can either use CSS positioning properties to center your content, or remove the absolute positioning and let flex properties do their work. – Michael Benjamin Jan 09 '18 at 13:38

0 Answers0