Normalizing Flexbox overflow in IE11

问题

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>

回答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>

回答2:

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>

来源：https://stackoverflow.com/questions/35920485/normalizing-flexbox-overflow-in-ie11

标签

html

css

css3

flexbox