Flex 元素在 IE11 上不会自动获得相等的高度

Question

在 Chrome/FF 上，我的 flex 元素具有相等的高度（最高元素的高度）。但在 IE11 上，它们都有各自的自然高度，因此它们最终具有不同的高度。

如何让它在 IE11 上像现代浏览器一样运行？

HTML（简体）：

<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%;
}

Answer 1

解决此问题的一种方法是将min-height: inherit 添加到您的child 类中：

.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>

这保证您的子元素将扩展以填充父元素。

Answer 2

在 IE10 和 IE11 中，如果容器具有 min-height 但没有明确的 height 属性，则具有 display: flex 的容器将无法正确计算其伸缩子项的大小。

因此需要更改.parent类上的相应属性。

.parent {
   height: 100vh;
}

Answer 3

我尝试了解您的问题，发现@David Lagace 已经通知您 IE 浏览器存在一些已知的 flex 问题。

如果您需要跨浏览器解决方案，并且可以从代码中删除 flex，那么下面的代码示例可以解决您的问题。

#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>

输出：

参考资料：

1. Referenced answer
2. Equal Height Columns with Cross-Browser CSS