Making flexbox work in IE11

Question

I know there are similar questions about, but I have tried all of the suggestions and still cant get it working. I am using Bootstrap, and I have a section that is 100vh in height. Within this section I have two rows, the second row I needed placing at the very bottom of the section, but did not want to use absolute positioning. As such, I used the flex system.

My layout was like so

.mn120 {
  min-height: 120px;
}

img {
  max-width: 40%;
}

.mh100vh {
  min-height: 900px;
}

.col-md-4 {
  margin-top: auto;
}

<section id="someSection" class="section">
  <div class="container d-flex flex-column justify-content-between fHeight mh100vh">
 <div class="row">
   <div class="col-md-8 offset-2">
  <h2 class="section-title">Header Text</h2>
  <p class="section-subtitle">
    Some Text
  </p>
   </div>
 </div>
 <div class="row d-flex fHeight">
   <div class="col-md-4">
  <img class="btmImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAAD7CAMAAAD3qkCRAAAAMFBMVEX3+fnMzMzNzs72+PjQ0NDv8fHY2dny9PTo6enu8PDi4+Pd3t7U1NTe39/r7OzJycld9/9/AAAFnElEQVR4nO2di5arIAxFGcEXovz/317bTue205ckJ5hxZf9Au5eEQITomqPg8lFwX0fBTPRhJvowE32YiT7MRB9mog8z0YeZ6MNM9CFv0oQQ0pXQiP2OrEmTuiku49j23jnvfbsMXcgyvyVnkptulejdL/zYyfyekEnOKT5afLtEkSEmY9JMrX+ucWZJAr8pYZLiO43LYwnwX8WbpPhiVN3Rxw4sgzYJmzzOz2WMUwoZNpNhTXI3bvS4yPTjMHcNRgZqEpYSjx+dATIvI02mT4H+kn7mBw3OJHycsd7RRu7MjDLJiTKybhkn3j8AmeRu65T1Gj+wcj/GJNND5JYxMaYxjAlGZI18xiwGMUGJsFQAJqCh9a1CHmB8k9wBRdbpmJpZ+CaJP2vdsexlElqsiHNxJ5MBLUKNeq7JDA2SC7QMyTRJAiLOk5ZgPJNctB3ZDClSeCadiIjz1U0a8AT8A2V4cUxyFBJxMyHRc0yCTJSsDHVNssQMfKGva0KqP2zDEzIKwwS7crw3ISwjGSZi8U7LjXQTuXhfISy96CZJUMQR6ix0E8HBtSaUmiZyM5cjpUa6idzMtRIrmoiGSVWT6SgmcqvH6iaiAV/VRGprUt2kEZ26apqIlCL+Q9igUE0EF8KVTZBV7X1NZlGRiibC6eRAJks9E3xh+96k/C9RTWRTvBsPY0J4s0WduyQ38Ycy6cuLK1pNyosrRJMG/nbxHl9eXCGa4N+T/jIpXwwrNXFLcWVYq4kvfkOn1aR89lJrUlwa1mtSOrz0mgxmos6k0uhqhFcr9Uyk112u/BUK1UR4f+KqzcLyz6RWZpR/JmPpXkvp7pdwXE1pbYXwzlRpvYuwaaSaCFdT3VJcklBaqy9eq6g1qVeR+AqyJvVqkFKnUq8c5n183fNdksOr7jlIyYdCOY5ON2nkFiy1z3ADrss9h1De5pl8sa5ivsYTjqkxTYQ28+WFVLaJTKKnjS2micTa3k/Ey3O8WxsCB+8oqQRggk+PlOwOMYFvuOgXspkm6FsC5RsslAn6TDrjjjzXJEOvmI6MxgX827LIk16cu/6Au9jA8UW8KIsywSUVwlt4qAnuwC11oQIzgSUV6oVylAnsxK2nXGOEmqByCn2lgjJB3ZEnLx5xJqDiBK+fD8QEs+OiXCxFmyTINpi2fceaQFbEtE4FYBPINoXXXwllgih9cRurYUwAGYWzoAeaABYs3MGF6kTGX7BwFvRnUD3VuGmetaA/A+vYxzRp2a1UYR37mA+FHfC4Z8LcORYfU3kAZsI8n87aZJ3BdbbkDS/eiv4EzoSXUjQ9E94mhfj65wacCa9vlKKIZ2639OQT7jPhdOe8oMWEclLlHi0Rz3lzckFLPnFex04L0TyVOw+Ddlq81tUXqK+vkSZpgBS8dq/cBdj5gokT9fwOsDPwRePCcOGagAbWFb/s1Ck5Y+qot7RUFd4JHIluo31HU2GZyByF3KG/sFRnS5oKw0SwRSdlBiObZKFTkGcIh9HpJrJXaep1jhE7YXulvExMMgGnw2eUH7UtN8kpyl+VJaiUmqzr9xoerryVRJlJrjCu/lMWKwUmTZjkb/veUVTA32oS0jRIz1eP9MP2L6FtMclNmodK0fHgssSNnw77aJJDF8e+YnQ8yowxfX2WeWuSc5iWXS2+8eP88cG8NtknMl6zdO/LSE9NQuqmofI8tYH27ZcQf5nkk0UcRgUj6hl+mV9OzDcma1R087BvdH/Et8OLucxdLU5fgu29aotvfB+ffWn3ZLImb1WxvYFxevgGsksaY3sDfUz34e/+2MO44Vf47/13ePQ3H6fe+79wOX8FNR/B5IQ/fzl0738BYk0ye/8FFF68AYxhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIZhGIbxV/gHsWx5jdRW/s8AAAAASUVORK5CYII=" alt="" />
   </div>
   <div class="col-md-8">
  <img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
   </div>
 </div>
  </div>
</section>

I made use of a lot of Bootstrap classes to help me achieve this layout. To demonstrate the issue, I have changed the height of the section to 900px rather than 100vh

So, if you view this JSFiddle in something like chrome, you will see that the image row sits at the bottom of the section. However, if you view it in IE11, you will see that the image row does not sit at the bottom of the section.

Is there any way to make this layout work within IE11?

I'm running it in IE and Chrome with the same effect https://www.screencast.com/t/IK6mgEbk See the screenshot — LOTUSMS, Nov 06 '17 at 12:53
From the looks of your screenshot, you are displaying it in tablet view. If you increase the width of the browser, the images should be on the same row, not stacked. Thanks — katie hudson, Nov 06 '17 at 13:47
You should specify this in your question by the way, but either way, here is a full screen screenshot in IE https://www.screencast.com/t/UZblTMhTB6 — LOTUSMS, Nov 06 '17 at 13:54
Thats definitely not displaying correctly for you. The two images should be next to each other, not stacked. — katie hudson, Nov 06 '17 at 17:57

Asons · Accepted Answer · 2017-11-07T09:24:15.983

You can do these 2 things to make it render the same cross browsers:

IE has a min-height bug when using flex column direction, adding display: flex to its parent (section) solves that
IE also have some issues when it comes to auto margins, so instead of margin-top: auto on the .col-md-4 item, use align-items: flex-end on the parent (row d-flex fHeight)

Updated fiddle

Stack snippet

.section {
  display: flex;               /*  added  */
}

.row.d-flex.fHeight {
  align-items: flex-end;       /*  added  */
}

.mn120 {
  min-height: 120px;
}

img {
  max-width: 40%;
}

.mh100vh {
  min-height: 900px;
}

/*
.col-md-4 {
  margin-top:auto;
}
*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="someSection" class="section">
  <div class="container d-flex flex-column justify-content-between fHeight mh100vh">
    <div class="row">
      <div class="col-md-8 offset-2">
        <h2 class="section-title">Header Text</h2>
        <p class="section-subtitle">
          Some Text
        </p>
      </div>
    </div>
    <div class="row d-flex fHeight">
      <div class="col-md-4">
        <img class="btmImg" src="https://i.stack.imgur.com/V5BcV.png" alt="" />
      </div>
      <div class="col-md-8">
        <img class="btmImg" src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" alt="" />
      </div>
    </div>
  </div>
</section>

score 0 · Answer 2 · answered Sep 30 '19 at 14:37

0

I was using Bootstrap 4 class .d-flex with min-height: 350px; which have no-spacing/height issue for container in IE11. Fixed by adding height to the flex container.

Try adding height

height: 350px;

answered Sep 30 '19 at 14:37

Deepak Rajpal

811
1
8
11

score 0 · Answer 3 · answered Oct 20 '20 at 15:00

In addition to this. I would recommend to use your own .d-flex class.

I've implemented this sass script: https://gist.github.com/richardtorres314/26b18e12958ba418bb37993fdcbfc1bd

.d-flex-new {
  @include flexbox();
  width: 100%;
}

This in combination with the two options from @Ason

Making flexbox work in IE11

3 Answers3

Linked