Flexbox,min-height,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>

Answer 1

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

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

错误报告 - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-预览#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>

但是这有限制,如果.element添加更多的s ,盒子不会增长,所以可能不是你想要的.

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

.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的行为与其他浏览器相同.

合规浏览器会忽略此问题,并将继续遵循min-height: 300px;规则集.wrapper.