Flexbox，最小高度，margin auto 和 Internet Explorer

Question

我过去使用 display: flex 和 margin: auto 来创建这种布局：

这在所有支持 Flexbox 的浏览器上都可以正常工作，甚至包括 IE。
然而，如果没有一个小例外的话，它会变得太简单了：min-height。

您可以在此处找到一个简单的工作示例。当在容器上使用 min-height 时，最后一个元素未被推到该容器底部（仅在 IE 中）。

我无法让它正常工作，你们有任何想法吗？谢谢。

在 IE11 上测试

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  
  border: 1px solid grey;
  padding: 5px;
}
.element {
  height: 35px;
  
  border: 1px solid grey;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="wrapper">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

- zessx

---

position: absolute 可以是解决方法。IE11、flexbox 和 height & min-height 以及整体高度非常不兼容。我在使用 flexbox 布局时遇到了很多 IE11 布局问题。 - knitevision

这是一种“变通”的解决方法：http://codepen.io/anon/pen/zGVaZX。 - knitevision

Answer 1

这是IE浏览器flexbox实现中的一个bug:

在所有支持flexbox的其他浏览器中，基于flex-direction:column的flex容器将尊重其容器的min-height以计算flex-grow长度。但在IE10和11-preview中，它似乎只能使用明确的height值。

Bug报告 - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

看起来这已经被微软注意到并将在未来的某个时刻修复：

不幸的是，我们无法在即将发布的版本中解决此反馈。我们将考虑您的反馈，并在将来的版本中进行修复。我们将保持此连接反馈错误处于活动状态，以跟踪此请求。

微软的回复 - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

目前的简单解决方案是使用height：

.wrapper {
  border: 1px solid grey;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 300px;
  padding: 5px;
}
.element {
  border: 1px solid grey;
  height: 35px;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="wrapper">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

但这种方法的局限性在于，如果添加了更多的 .element，那么该框将不会增长，因此可能并不是您想要的。

似乎有一种比较巧妙的方法可以实现这一点，但它确实需要一个额外的包含元素：

.container {
  display: table;
  min-height: 300px;
  width: 100%;
}
.wrapper {
  border: 1px solid grey;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
  padding: 5px;
}
.element {
  border: 1px solid grey;
  height: 35px;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="container">
  <div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

这将添加一个容器 (.container)，将其设置为 display: table; 并给它 max-height: 300px;。然后将 height: 100%; 添加到 .wrapper 中，使其适应 .container 的完整高度 (实际上是 300px)，从而使IE的行为与其他浏览器相同。

符合规范的浏览器会忽略此设置，并继续遵循在 .wrapper 上设置的 min-height: 300px; 规则集。

- Hidden Hobbes

---

我得出了相同的解决方案：额外的容器。叹气 - zessx

Answer 2

这里是另一种解决方案：

添加一个额外的容器，包含2个元素：

• 高度为“300px”的元素
• 你的“.wrapper”

请注意：本文中的HTML标签已被保留。

.container {
  display: flex;    
}
.min-height-fix {
  flex: 0 0 auto;
  height: 300px; /* the "min-height" */
  width: 1px; /* DEBUG */
  background: red; /* DEBUG */
}
.wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /*min-height: 300px;*/
  border: 1px solid grey;
  padding: 5px;
  flex-wrap: wrap;
}
.element {
  height: 35px;
  border: 1px solid grey;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="container">
  <div class="min-height-fix">
  </div>
  <div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

- Kevin Struillou