texte flexbox débordant de div dans Internet Explorer 11

Question

J'ai créé une configuration simple avec des wrappers en utilisant flexbox pour contrôler l'espacement sur une page. Il a deux en-têtes qui ont des positions fixes, un pied de page et un espace entre les deux qui remplit toujours le reste de l'écran verticalement, quel que soit le contenu de la page.

Maintenant je voulais ajouter un div entre le #content_wrapper et le #header_wrapper que je veux redimensionner en fonction de son contenu et de la largeur du navigateur. À cette fin, j'ai ajouté le #sub_header_wrapper div.

Tout cela fonctionne comme prévu dans Firefox, mais dans Internet Explorer, le texte de la div #sub_header_wrapper déborde et commence à chevaucher le texte #content_wrapper. Pourquoi cela se passe-t-il et comment cela peut-il être réparé?

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

Cela semble être la source du problème:

#sub_header_wrapper { 
    flex: 1 1 auto; 
} 

Cette règle se décompose en:

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

Dans Chrome et Firefox, la hauteur de l'article est la hauteur du contenu (flex-basis: auto). Cette hauteur est maintenue même si l'article a flex-shrink: 1. Fondamentalement, l'article ne rétrécit pas en dessous de sa hauteur de contenu.

Ce n'est pas le cas dans IE11. La règle flex-shrink permet à l'élément de rétrécir sous sa hauteur de contenu. La solution est de désactiver flex-shrink. Cela résout le problème dans IE11 tout en ne modifiant rien dans les autres navigateurs.

Effectuez ce réglage à votre code:

#sub_header_wrapper { 
    flex: 1 0 auto; 
} 

revised demo