Flex Properties Not Working in IE 10 Even With Old Prefix

Question

I created a hero where the text is positioned to the left of an image, using flexbox to automatically position the text in the center of the div, relative to the image.

I used the old and new IE prefix to enable this to work on the latest version of IE, however it does not seem to be working on IE 10. The text div appears to be stretching through the full-width of the column, and behind the image on the right. Any ideas on why this is happening?

Code:

.hero {
  background-color: #3c763d;
  text-align: center;
}

.flex {
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: row;
}

.d-flex {
  -ms-flex-align: center!important;
  -webkit-box-align: center!important;
  align-items: center!important;
  display: -ms-flexbox!important;
  display: -webkit-box;
  display: flex;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  -moz-flex: 1 1 15em;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 15em;
  flex: 1 1 15em;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

<section class="section hero">
  <div class="container">
    <div class="row flex">
      <div class="col-xs-12 col-md-6 d-flex">
        <div>
          <h2>Headline</h2>
          <p>Paragraph text</p>
        </div>
      </div>
      <div class="col-xs-12 col-md-6">
        <div>
          <img class="img-responsive" src="http://pngplay.com/wp-content/uploads/1/Laptop-PNG-Image.png">
        </div>
      </div>
    </div>
  </div>
</section>

This link might be of use -- IE10 has a different implementation of flexbox but there may be work arounds: https://github.com/philipwalton/flexbugs — Mathias Rechtzigel, Jun 12 '18 at 17:24
flex doesn't work with IE10 very well and it has some issues, then where is your flex direction? and it hard to see your issue in the post — Adam, Jun 12 '18 at 18:18

DavidW · Answer 1 · 2018-06-12T17:39:18.143

1

Can I Use notes that IE10 only supports the 2012 syntax for flexbox. (It also notes that support is considered partial due to the large number of known bugs.)

Giving the syntax doc a quick scan suggests that align-items doesn't exist and may instead be flex-item-align. Also, your example doesn't seem to include a flex-direction.

Having tried to use flex in a large-scale web app 3 or 4 years ago, we ended up simply using Javascript work-arounds for all versions of IE.

edited Jun 12 '18 at 17:39

answered Jun 12 '18 at 17:29

DavidW

1,413
10
17

Thank you for the feedback & suggestions! – penmas Jun 13 '18 at 16:20
I actually tried adding additional prefixes, including the older -ms-flex-pack and the additions still didn't work on IE10 but appears fine on all other versions. A shame, I will likely have to identify a different implementation method. – penmas Jul 02 '18 at 16:07

Flex Properties Not Working in IE 10 Even With Old Prefix

1 Answers1