flexbox 文本从 Internet Explorer 11 中的 div 溢出

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