Flexbox, min-height, margin auto 和 Internet Explorer [英] Flexbox, min-height, margin auto and Internet Explorer

问题描述

我使用 display: flex 和 margin: auto 来获得这种布局:

这适用于所有支持 Flexbox 的浏览器，甚至 IE.
但是，如果没有一个小例外:min-height，那就太容易了.

您可以在此处找到一个简单的工作示例.在我的包装器上使用 min-height 时，最后一个元素不会被推到这个包装器的底部(仅限 IE).

我无法让它工作，你们女孩/男孩有什么想法吗?谢谢.

在 IE11 上测试

.wrapper {显示:弹性；弹性方向:列；最小高度:300px；边框:1px 纯灰色；填充:5px；}.元素 {高度:35px；边框:1px 纯灰色；边距:5px；}.element:last-child {边距顶部:自动；}

<div class="元素"></div><div class="元素"></div><div class="元素"></div><div class="元素"></div>

解决方案

这是 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-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)

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

.wrapper {边框:1px 纯灰色；box-sizing: 边框框；显示:弹性；弹性方向:列；高度:300px；填充:5px；}.元素 {边框:1px 纯灰色；高度:35px；边距:5px；}.element:last-child {边距顶部:自动；}

<div class="元素"></div><div class="元素"></div><div class="元素"></div><div class="元素"></div>

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

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

.container {显示:表；最小高度:300px；宽度:100%；}.包装{边框:1px 纯灰色；box-sizing: 边框框；显示:弹性；弹性方向:列；高度:100%；最小高度:300px；填充:5px；}.元素 {边框:1px 纯灰色；高度:35px；边距:5px；}.element:last-child {边距顶部:自动；}

<div class="wrapper"><div class="元素"></div><div class="元素"></div><div class="元素"></div><div class="元素"></div>

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

兼容的浏览器会忽略这一点，并将继续遵循 min-height: 300px; 设置在 .wrapper 上的规则.

I use to play with both display: flex and margin: auto to have this kind of layouts:

This works well on every browser supporting Flexbox, even IE.
However, it would have been too easy if there hadn't had a little exception: min-height.

You can find a simple working example here. When using min-height on my wrapper, the last element is not pushed to the bottom of this wrapper (IE only).

I can't get this to works, do you girls/guys have any idea? Thanks.

Testing on 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>

解决方案

This is a bug in IE's flexbox implementation:

In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

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

It appears that this is on Microsoft's radar and will be fixed some point in the future:

Unfortunately, we are not able to address this feedback in our upcoming release. We will consider your feedback for a future release. We will keep this connect feedback bug active to track this request.

Reply from 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)

For now the simple solution is to use 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>

But this has the limitation that the box wont grow if more .elements are added so probably isn't what you are after.

There does appear to be a somewhat hacky way of achieving this although it does require an extra containing 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>

This adds a container (.container), sets it to display: table; and gives it max-height: 300px;. height: 100%; is then added to .wrapper to get it to fit the full height of .container (effectively 300px) thus making IE behave the same as other browsers.

Compliant browsers ignore this and will continue to follow the min-height: 300px; rule set on .wrapper.

这篇关于Flexbox, min-height, margin auto 和 Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！