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>

Answer 1

这是IE flexbox实施中的错误：

在支持flexbox的所有其他浏览器中，基于flex-direction:column的Flex容器将使用容器min-height来计算flex-grow长度。在IE10＆amp; 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）

看来这是微软的雷达，未来某些方面将得到修复：

很遗憾，我们无法在即将发布的版本中解决此反馈。我们会考虑您对未来版本的反馈。我们将保持此连接反馈错误处于活动状态以跟踪此请求。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

但是这有限制，如果添加更多.element s，框不会增长，所以可能不是你所追求的。

虽然确实需要一个额外的包含元素，但似乎确实有一种实现这种方式的方法：

＆＃13;

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

＆＃13;

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

＆＃13;

这会添加一个容器（.container），将其设置为display: table;并为其提供max-height: 300px;。然后将height: 100%;添加到.wrapper以使其适合.container的完整高度（有效300px），从而使IE的行为与其他浏览器相同。

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

Answer 2

这是另一个解决方案：

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

高度为＆＃34; 300px＆＃34;
你的＆＃34; .wrapper＆＃34;

＆＃13;

<div><canvas></canvas><p> Click for new points</p></div>

＆＃13;

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

＆＃13;

Flexbox，min-height，margin auto和Internet Explorer

2 个答案: