Flex elements don't automatically get equal height on IE11

Question

On Chrome/FF my flex elements have equal heights (the height of the tallest element). But on IE11 they each have their natural height, so they end up having different heights.

How to make it behave on IE11 like on modern browser?

HTML (simplified):

<div class="parent">
  <div class="child">
    ...
  </div>

  <div class="child">
    ...
  </div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.child {
  flex: 1 1 50%;
}

score 3 · Answer 1 · answered Sep 19 '20 at 23:58

3

One workaround for this issue is to add min-height: inherit to your child class:

.parent {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  border: 2px solid blue;
}

.child {
  flex: 1 1 50%;
  border: 2px dashed orange;
  min-height: inherit;
}

<div class="parent">
  <div class="child">
    Column 1
  </div>

  <div class="child">
    Column 2
  </div>
</div>

This guarantees that your child elements will expand to fill the parent.

answered Sep 19 '20 at 23:58

D-Money

2,375
13
27

Thanks, doesn't seem to work though. I mean when content on both sides is less than one screen tall then sure it works. When it's taller - and that's the case in my real project, it does not work: https://jsfiddle.net/2kn0x8gs/ – drake035 Sep 30 '20 at 12:28

score 2 · Answer 2 · answered Sep 17 '20 at 18:10

2

In IE10 and IE11, containers with display: flex will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

Therefore you need to change the corresponding property on the .parent class.

.parent {
   height: 100vh;
}

answered Sep 17 '20 at 18:10

davidlagace

57
10

Thanks but my content is taller than one screen height so if I do this it gets alkl cut off – drake035 Sep 17 '20 at 19:13

score 2 · Answer 3 · answered Sep 22 '20 at 06:28

I try to understand your issue and found that @David Lagace has already informed you that the IE browser has some known issues with flex.

If you want a cross-browser solution and if you can remove the flex from your code then the below code sample can fix your issue.

#container2 {
         clear:left;
         float:left;
         width:100%;
         overflow:hidden;
         background:#ffa7a7; /* column 2 background colour */
         }
         #container1 {
         float:left;
         width:100%;
         position:relative;
         right:50%;
         background:#fff689; /* column 1 background colour */
         }
         #col1 {
         float:left;
         width:46%;
         position:relative;
         left:52%;
         overflow:hidden;
         }
         #col2 {
         float:left;
         width:46%;
         position:relative;
         left:56%;
         overflow:hidden;
         }

<DIV id="container2">
         <DIV id="container1">
            <DIV id="col1">
               <!-- Column one start -->
               <h2>Equal height columns</h2>
               <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
               <h2>2 Column Dimensions</h2>
               <p>Each column is 50 percent wide with 2 percent padding on each side.</p>
               <!-- Column one start -->
               <h2>No CSS hacks</h2>
               <p>The CSS used for this 2 column layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.</p>
               <h2>No Images</h2>
               <p>This Two column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
               <h2>No JavaScript</h2>
               <p>JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.</p>
               <h2>Valid XHTML strict markup</h2>
               <p>The HTML in this layout validates as XHTML 1.0 strict.</p>
               <!-- Column one end -->
               <!-- Column one end -->
            </DIV>
            <DIV id="col2">
               <!-- Column two start -->             
               <h2>Cross-Browser Compatible</h2>
               <p>This 2 column layout has been tested on the following browsers:</p>
               <h3>iPhone &amp; iPod Touch</h3>
               <ul>
                  <li>Safari</li>
               </ul>
               <h3>Mac</h3>
               <ul>
                  <li>Safari</li>
                  <li>Firefox</li>
                  <li>Opera 9</li>
                  <li>Netscape 7 &amp; 9</li>
               </ul>
               <h3>Windows</h3>
               <ul>
                  <li>Firefox 1.5, 2 &amp; 3</li>
                  <li>Safari</li>
                  <li>Opera 8 &amp; 9</li>
                  <li>Explorer 5.5, 6 &amp; 7</li>
                  <li>Google Chrome</li>
                  <li>Netscape 8</li>
               </ul>
               <h2>This layout is FREE for anyone to use</h2>
               <p>You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are feeling generous however, link back to this page so other people can find and use this layout too.</p>
               <!-- Column two end -->
            </DIV>
         </DIV>
      </DIV>

Output:

References:

Flex elements don't automatically get equal height on IE11

3 Answers3