IE 中的最小高度和弹性答案

【问题标题】：min-height and flex in IEIE 中的最小高度和弹性
【发布时间】：2016-08-31 21:42:41
【问题描述】：

我有一个带有以下 CSS 的 HTML 元素：

.examples {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
}

在 HTML 元素内部是一行 10 个以下元素：

.option {
    flex: 0 0 auto;
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    cursor: pointer;
}

由于某种原因，在 Chrome 和 Safari 中，选项元素在示例元素的底部垂直对齐，但在 IE 11 中并非如此。如何在 IE 11 中解决此问题？

【问题讨论】：

没有足够的代码来重现问题，很难帮助您识别和解决问题。然而，看看你的代码，你在弹性项目上使用百分比边距。 flexbox 规范不鼓励这种做法：stackoverflow.com/a/36783414/3597276

标签： html css internet-explorer flexbox internet-explorer-11

【解决方案1】：

尝试：

.option {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    cursor: pointer;
}
.examples {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    align-items: flex-end;
}`

【讨论】：

没有帮助。不起作用。我有一个自动脚本，可以自动将 ms- 添加到每个属性