无法获取 display:block 元素（而不是 display:flex 元素）以在 IE11 中包含它的子元素

Question

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

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

在 Chrome 中工作正常，不适用于 IE11。

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

很想就此获得一些建议，谢谢。理想情况下，首选非侵入式修复，因为有遗留限制。

Answer 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>

Answer 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>

另见：

无法获取 display:block 元素（而不是 display:flex 元素）以在 IE11 中包含它的子元素

Can't get display:block element (instead a display:flex element) to contain it's child in IE11

html

css

flexbox

internet-explorer-11