Normalizing Flexbox overflow in IE11

Question

Take a look at the code sample below in each Chrome and IE11. In Chrome, the <main> background stops at the edge of the .container element, which is desired. In IE it spills outside of the .container element:

What I'm looking for:

I want IE to have the <main> element end at the edge of the .container element
in the case of .container2, it's displaying properly: the <main> element should only take up as much height as it needs.

.container {
  height:400px;
  background:#333;
  display:flex;
  flex-direction:column;
  width:40%;
  position:absolute;
}

.container2 {
  left:50%;
}
header {
    color:white;
}
main {
  background:#ccc;
  width:30%;
  display:flex;
  flex-direction:column;
}

<div class="container">
  <header>This is good in Chrome but bad in IE</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>

<div class="container container2">
  <header>This is good in both browsers</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>

Asons · Accepted Answer · 2016-03-10 17:56:52Z

1

flex has some really bad behavior (bug, flaws, shortcomings or what ever to call it) when it comes to limit height on flex children in some situations.

Using position: absolute has been a saver for me many times, set on an inner div, like this.

Tested in Chrome, IE11, Edge, FF, all working.

.container {
  height: 400px;
  background: #333; display: flex;
  flex-direction: column;
  width: 40%; position: absolute;
}
.container2 { left:50%; }
header {
  color:white;
}
main {
  flex: 1;
  width: 30%;
  position: relative;
}
.inner {
  position: absolute;
  background:#ccc;
  left: 0;
  top: 0;
  right: 0;
  height: auto;
  max-height: 100%;
}

<div class="container">
  <header>This is good in Chrome but bad in IE</header>
  <main>
    <div class="inner">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </main>
</div>

<div class="container container2">
  <header>This is good in both browsers</header>
  <main>
    <div class="inner">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </main>
</div>

answered Mar 10, 2016 at 17:56

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

i7nvd Over a year ago

I wish it were possible more semantically, but this is the best workaround I've found after searching for a few hours. Thanks.

Asons Over a year ago

@i7nvd I wish that too, but soon IE11 is gone :)

vals · Accepted Answer · 2016-03-10 17:21:40Z

Setting main max-height to 100% should do the trick.. However, for some reason, IE doesn't handle this is the height property is missing.

This is not really an answer, as now the second example is wrong... but I will leave it here just in case it can help someone find the solution

.container {
  height:400px;
  background:#333;
  display:flex;
  flex-direction:column;
  width:40%;
  position:absolute;
}

.container2 {
  left:50%;
}
header {
    color:white;
}
main {
  background:#ccc;
  width:30%;
  display:flex;
  flex-direction:column;
  height: 100%;
  max-height: 100%;
}

<div class="container">
  <header>This is good in Chrome but bad in IE</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p><p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>

<div class="container container2">
  <header>This is good in both browsers</header>
  <main>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </main>
</div>

Collectives™ on Stack Overflow

Normalizing Flexbox overflow in IE11

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related