在Internet Explorer 11

Question

我创建了一个简单的设置，其中一些包装器使用flexbox来控制页面上的间距。它有两个具有固定位置的标题，一个页脚和一些空间，它们总是垂直填满屏幕的其余部分，无论页面上实际有多少内容。

现在我想在#content_wrapper和#header_wrapper之间添加一个div，我希望根据其内容和浏览器宽度调整大小。为此我添加了#sub_header_wrapper div。

这一切都在Firefox中按预期工作，但在Internet Explorer中，＃sub_header_wrapper div中的文本溢出并开始重叠#content_wrapper文本。为什么会发生这种情况？如何解决这个问题？

jsfiddle：https://jsfiddle.net/mevn8bvL/21/

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}


/* needed to reset CSS so you dont get extra unneeded whitespace */

html,
body {
  margin: 0;
  /* required to avoid scroll bars due to min-height 100vh */
}

#outer_wrapper {
  margin: 0;
  height: 0;
  /* required by IE to make flex-grow work */
  min-height: 100vh;
  background-color: pink;
  display: flex;
  flex-direction: column;
}


/* flex-grow is 99 to offset the variable nature of the sub header containers. */

#content_wrapper {
  background-color: green;
  flex-grow: 99;
  /* this is what makes the div expand even when there's no content. */
}

#article_list {
  background-color: red;
}

#header_wrapper {
  position: fixed;
  width: 100%;
  z-index: 199;
  box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.2);
}

#header_top_wrapper,
#header_bottom_wrapper {
  height: 70px;
  min-height: 70px;
  /* min-height required to enforce the height */
}

#sub_header_wrapper {
  background-color: rgb(150, 150, 255);
  margin-top: 140px;
  flex: 1 1 auto;
}

#header_top_wrapper {
  background-color: yellow;
}

#header_bottom_wrapper {
  background-color: orange;
}

#footer_wrapper {
  height: 100px;
  min-height: 100px;
  background-color: blue;
}

<div id="outer_wrapper">

  <div id="header_wrapper">
    <div id="header_top_wrapper">
      header top
    </div>
    <div id="header_bottom_wrapper">
      header bottom
    </div>
  </div>
  <div id="sub_header_wrapper">
    sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text.
    sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text.
    sub header with informational text. sub header with informational text. sub header with informational text. sub header with informational text.
  </div>
  <div id="content_wrapper">
    <div id="article_list">
      <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>
    </div>
  </div>
  <div id="footer_wrapper">
    footer
  </div>

</div>

Answer 1

这似乎是问题的根源：

#sub_header_wrapper {
  flex: 1 1 auto;
}

此规则分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

在Chrome和Firefox中，项目的高度是内容的高度（flex-basis: auto）。即使项目具有flex-shrink: 1，也会保持此高度。基本上，该项目的收缩率不会低于其内容高度。

在IE11中不是这样。 flex-shrink规则允许项目缩小到其内容高度以下。

解决方案是禁用flex-shrink。这解决了IE11中的问题，而在其他浏览器中没有更改任何内容。

对您的代码进行此调整：

#sub_header_wrapper {
  flex: 1 0 auto;
}

revised demo