How to make a flexbox layout with min-height in IE?

Question

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

<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="someimage.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>

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?

why are you putting height in your parent container. Let it be height: auto; — Rajan Benipuri, Oct 26 '17 at 21:25
The height of the section has to be 100vh, it needs to take up the whole viewport — katie hudson, Oct 26 '17 at 21:58

How to make a flexbox layout with min-height in IE?

0 Answers0