无法让 display:block 元素（而不是 display:flex 元素）在 IE11 中包含它的子元素答案

【问题标题】：Can't get display:block element (instead a display:flex element) to contain it's child in IE11无法让 display:block 元素（而不是 display:flex 元素）在 IE11 中包含它的子元素
【发布时间】：2017-06-11 08:11:57
【问题描述】：

如何让我的块元素包含它在 IE11 EDGE 中的子元素？

在小提琴中，您可以看到<footer> 位于<login-page> 下方，而它本应位于<login> 下方。（因为<login-page> 没有封装<login>）。

在 Chrome 中运行良好，而不是 IE11。

https://jsfiddle.net/10ohr6wy/1/

希望就此获得一些建议，谢谢。理想情况下，最好使用不显眼的修复方法，就像遗留约束一样。

【问题讨论】：

可能相关：stackoverflow.com/questions/9845011/… 请注意，它表示自定义元素必须在标签名称中包含 -。此外，支持链接显示它参差不齐：caniuse.com/#feat=custom-elements 当您获得这样的支持时，您肯定会出现不一致的行为。
读起来很有趣，谢谢。
另一个问题的答案是：使用flex: 1 1 auto 代替flex: 1。以下是详细信息：stackoverflow.com/q/32239549/3597276

标签： css html flexbox internet-explorer-11

【解决方案1】：

我相信您实际上正在处理 flex + min-height 错误。

一种方法是，将父元素设置为 flex column 元素：

这里

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

工作正常。 https://jsfiddle.net/10ohr6wy/3/

body {
  display: flex;
  flex-flow: column;
}
app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.xui-page-body {
  padding-bottom: 40px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background: green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background: black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

如果您没有将flex-direction 设置为column，那么app 需要是唯一的孩子。

可以通过以下方式调整大小：

flex:1; 如果你想包含margins

body {
  display: flex;
}
app {
  flex:1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.xui-page-body {
  padding-bottom: 40px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background: green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background: black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

或

width:100%; 和 box-sizing:border-box 包括 border 和 padding（如果有）。

body {
  display: flex;
}
app {
  width:100%;
  box-sizing:border-box;
  padding: 3em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.xui-page-body {
  padding-bottom: 40px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background: green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background: black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

【讨论】：

我遇到了下一个问题。如果内容足够长，现在会悬在
上。我该如何解决这个问题？ (jsfiddle.net/10ohr6wy/8)
@Baconbeastnz 您还需要将flex: 1 1 auto; 应用到.xui-page-body 以及IE。 jsfiddle.net/10ohr6wy/9

【解决方案2】：

使body 元素成为弹性容器。

给app全宽。

revised fiddle

body {
  display: flex; /* new */
}

app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%; /* new */
}
.xui-page-body {
    padding-bottom: 40px;
    display: flex;
    flex: 1;
    flex-direction: column;
}
login-page {
  flex: 1;
  padding: 10px;
  margin-bottom: -40px;
  display: block;
  background:green;
}
login {
  display: block;
  height: 200px;
  background: red;
}
footer {
  height: 50px;
  display: block;
  background:black;
}

<app>
  <div class="xui-page-body">
    <login-page>
      <login></login>
    </login-page>
  </div>
  <footer></footer>
</app>

另见：flex container min-height ignored in IE

【讨论】：