Ho un elemento padre che contiene due elementi figli che vengono visualizzati uno sopra l'altro utilizzando la flexbox. Questo elemento padre ha una proprietà di altezza massima impostata su un determinato valore. Quindi, fintanto che il contenuto è breve, l'elemento genitore dovrebbe rimanere piccolo, e man mano che il contenuto cresce, l'elemento genitore cresce con esso fino a quando non raggiunge la sua altezza massima. A questo punto dovremmo vedere le barre di scorrimento sull'elemento di contenuto.Padre Flexbox overflow padre con altezza massima specificato su IE
#container {
display: flex;
max-width: 80vw;
max-height: 100px;
flex-direction: column;
}
#content {
overflow-y: auto;
}
/* styling - ignore */
#container {
border: 2px solid black;
margin-bottom: 1em;
}
#header {
background-color: rgb(245, 245, 245);
padding: 10px;
}
#content {
background-color: rgb(255, 255, 255);
padding: 0 10px;
}<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Everything works as supposed to, move along</p>
</div>
</div>
<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Very long content</p>
<p>Very long content</p>
<p>Very long content</p>
<p>Very long content</p>
</div>
</div>Questo funziona perfettamente su Firefox e Chrome. Su Internet Explorer anche se le barre di scorrimento nell'elemento di contenuto non sono visualizzate; al contrario, l'elemento di contenuto fuoriesce dall'elemento padre.
Ho provato a giocare con gli attributi flex-base e altri flexbox, molto cercato, ma senza fortuna.
Non hai menzionato quale versione di IE, ma sostenere che c'è ... ehm ... * non * top-notch. Vedi [** CanIUse.com **] (http://caniuse.com/#feat=flexbox) –
Beh, il flexbox è stato implementato in IE10 e, in questo caso, IE11 si comporta esattamente allo stesso modo di IE10. –
Implementato ma ancora difettoso ... vedere i problemi elencati al link indicato. –