弹性容器最小高度在 IE 中被忽略 [英] flex container min-height ignored in IE

问题描述

据我所知，如果使用 IE10/IE11，我应该能够使用标准化的弹性术语.

我有一个容器 div 和 2 个子 div.

2 个子 div 不大于 400px，所以应该总是有足够的空间给 justify-content: space-between.

我希望第一个孩子一直在顶部，第二个孩子一直在底部.

这在 Chrome 和 Firefox 中有效，但在 IE 中无效，我不知道为什么.

欢迎提出任何意见和反馈.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; 背景颜色:浅黄色;"><div style="background-color: red;"><h2>标题(可变高度)</h2><p>总结(可变高度)</p>

<div style="background-color: orange;"><img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg"/>

https://jsfiddle.net/akxn68vm/

解决方案

IE 10 &11 在正确渲染 flexbox 时存在许多问题.

这里有一个:弹性容器不尊重这些浏览器中的 min-height 属性.

一个简单的解决方案是让你的弹性容器也是一个弹性项目.

只需将此添加到您的代码中(无需其他更改):

body {显示:弹性；弹性方向:列；}

修正小提琴

更多信息:https://github.com/philipwalton/flexbugs#flexbug-3

As far as I've been able to gather, if working with IE10 / IE11 I should be able to use the standardized flex terms.

I have a container div and 2 child divs.

The 2 child divs are not larger than 400px, so there should always be enough room for the justify-content: space-between.

I want the first child to be all the way at the top and the second child to be all the way at the bottom.

This works in Chrome and Firefox but not in IE, and I have no idea why.

Any comments and feedback are welcome.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

解决方案

IE 10 & 11 have a number of issues with rendering flexbox properly.

Here's one: A flex container doesn't respect the min-height property in these browsers.

A simple solution is to make your flex container also a flex item.

Just add this to your code (no other changes necessary):

body {
   display: flex;
   flex-direction: column;
}

revised fiddle

More info: https://github.com/philipwalton/flexbugs#flexbug-3

这篇关于弹性容器最小高度在 IE 中被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！