Flexbox、最小高度、自动边距和 Internet Explorer答案

【问题标题】：Flexbox, min-height, margin auto and Internet ExplorerFlexbox、最小高度、自动边距和 Internet Explorer
【发布时间】：2015-11-15 05:20:11
【问题描述】：

我曾经使用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>

【问题讨论】：

position: absolute 可以在这里解决。 IE11、flexbox 和height 和min-height 以及总体上的高度都是非常糟糕的朋友。我在 flexbox 中的 IE11 布局有很多问题
这是一种解决方法codepen.io/anon/pen/zGVaZX。

标签： css internet-explorer flexbox

【解决方案1】：

这是 IE 的 flexbox 实现中的一个错误：

在所有其他支持 flexbox 的浏览器中，基于 flex-direction:column 的 flex 容器将使用容器 min-height 来计算 flex-grow 长度。在 IE10 和 11 预览版中，它似乎只适用于显式的 height 值。

错误报告 - (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)

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

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

但这有一个限制，如果添加更多.elements，盒子就不会增长，所以可能不是你想要的。

似乎确实有一种有点笨拙的方法来实现这一点，尽管它确实需要一个额外的包含元素：

.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; 规则。

【讨论】：

我找到了相同的解决方案：额外的容器。叹息

【解决方案2】：

这是另一个解决方案：

添加一个包含 2 个元素的附加容器：

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

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

【讨论】：