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

Question

I have created a simple setup with some wrappers using flexbox to control spacing on a page. It has two headers which have fixed positions, a footer and some space in between that always fills up the rest of the screen vertically regardless of how much content is actually on the page.

Now I wanted to add a div in between the #content_wrapper and the #header_wrapper which I want to resize depending on its content and the browser width. To this end I added the #sub_header_wrapper div.

This all works as expected in Firefox, but in Internet Explorer the text in the #sub_header_wrapper div spills out and starts overlapping the #content_wrapper text. Why is this happening and how can this be fixed?

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

This appears to be the source of the problem:

#sub_header_wrapper {
  flex: 1 1 auto;
}

This rule breaks down to:

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

In Chrome and Firefox, the height of the item is the height of the content ( flex-basis: auto ). This height is maintained even though the item has flex-shrink: 1 . Basically, the item doesn't shrink below its content height.

Not so in IE11. The flex-shrink rule enables the item to shrink below its content height.

The solution is to disable flex-shrink . This fixes the problem in IE11 while not changing anything in other browsers.

Make this adjustment to your code:

#sub_header_wrapper {
  flex: 1 0 auto;
}

revised demo