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

Question

How can I get my block element to contain it's child in IE11 EDGE?

In the fiddle, you can see that <footer> is sitting below <login-page> when it should be sitting below <login>. (Because <login-page> isn't encapsulating <login>).

Works fine in Chrome, not IE11.

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

Would love to get some advice on this thanks. Ideally a non-obtrusive fix would be preferred, as have legacy constraints.

May be relevant: http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5 Note that it says custom elements must contain a `-` in the tag name. Also, a link to support shows that it's spotty: http://caniuse.com/#feat=custom-elements When you have support like that, you're guaranteed to end up with inconsistent behaviour. — Adam Jenkins, Jan 25 '17 at 23:32
The answer to your other question is: Instead of `flex: 1` use `flex: 1 1 auto`. Here are the details: http://stackoverflow.com/q/32239549/3597276 — Michael Benjamin, Jan 26 '17 at 02:17

G-Cyrillus · Accepted Answer · 2017-01-26T00:53:49.457

I believe you are actually dealing with the flex + min-height bug.

One way, to go over it, is to set the parent as a flex column element:

here

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

works fine. 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>

if you do not set flex-direction to column, then app needs to be the only child.

it can be sized via :

flex:1; if you want to include 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>

or

width:100%; and box-sizing:border-box to include border and padding if any.

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>

I have ran into the next issue. now overhangs the
if the content is long enough. How can I get around this issue? (https://jsfiddle.net/10ohr6wy/8/) — williamsandonz, Jan 26 '17 at 01:23
@Baconbeastnz you need to apply also `flex: 1 1 auto;` to `.xui-page-body` as well for IE. https://jsfiddle.net/10ohr6wy/9/ — G-Cyrillus, Jan 26 '17 at 13:33

score 1 · Answer 2 · edited May 23 '17 at 12:01

Make the body element a flex container.

Give app full width.

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>

Also see: flex container min-height ignored in IE

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

2 Answers2