Flexbox，最小高度，margin自动和Internet Explorer [英] Flexbox, min-height, margin auto and Internet Explorer

问题描述

我使用 display：flex 和 margin：auto 来使用这种布局：

这在支持Flexbox的每个浏览器上都可以正常工作，即使是IE。

，如果没有少许例外： min-height 。

可以在这里找到一个简单的工作示例。在我的包装器中使用 min-height 时，最后一个元素不会推送到此包装器的底部（仅限IE）。

我不能让这个工作，你女孩/家伙有什么想法吗？感谢。

在IE11上测试

  .wrapper {display：flex; flex-direction：column; min-height：300px; border：1px solid gray; padding：5px;}。element {height：35px; border：1px solid gray; 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>  

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

在支持flexbox的所有其他浏览器中，基于flex的方法： flex-direction：column 容器 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回复 - href =https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview #tabsrel =nofollow> 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 gray; box-sizing：border-box;显示：flex; flex-direction：column; height：300px; padding：5px;}。element {border：1px solid gray; 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 gray; box-sizing：border-box;显示：flex; flex-direction：column;高度：100％; min-height：300px; padding：5px;}。element {border：1px solid gray; 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; height：300px; 。 height：100％; 然后添加到 .wrapper ，使其适合 .container （有效地 300px ），从而使IE的行为与其他浏览器相同。





合规浏览器会忽略此操作，并会继续遵循 min-height：300px; $ c> .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，最小高度，margin自动和Internet Explorer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！