2
Ich verwende ein Inline-Block-Element mit einem großen Inhalt in einer Flex-Box, und aus irgendeinem Grund wird Internet Explorer 11 den Inhalt dieses Elements nicht umbrechen, aber drücken Sie die Flexbox aus dem Bildschirm. Es ist in Chrome und FireFox in Ordnung.IE11 CSS-Anzeige Inline-Block überfüllt in Flexbox
Beispiel meines Problems: https://codepen.io/anon/pen/YVboBX
<div class="page">
<main>
<radio-widget>
<layout-container>
<section class="icon">X</section>
<section class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in ipsum id lectus egestas scelerisque sit amet ut libero. Nam luctus turpis nisi, ut mollis libero sodales eu. Donec ante ante, venenatis non sodales sed, venenatis id lacus. In ante
risus, lobortis et ligula eget, commodo euismod risus. Ut sem orci, ultrices eu finibus vel, aliquam et quam. Nunc bibendum sodales libero et pulvinar. Cras porta feugiat lorem, vitae pretium augue fringilla et. Vestibulum dui lacus, ultrices
a ante et, euismod hendrerit ligula. Sed non urna ipsum. Fusce eget massa ex. Phasellus ac tempor ligula. Nullam sagittis dignissim ipsum, non commodo tellus luctus in. Etiam eget eleifend ex.
</section>
</layout-container>
</radio-widget>
</main>
<aside> a side</aside>
</div>
CSS
div.page {
display: flex;
flex-direction: row;
}
main {
flex-grow: 1;
flex-shrink: 1;
}
aside {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 5em;
}
radio-widget {
display: inline-block;
}
layout-container {
display: flex;
}
section.icon {
flex-shrink: 0;
flex-grow:0;
flex-basis: 5em;
}
section.content {
flex-shrink: 1;
flex-grow:1;
}
Ich habe bereits versucht, die folgenden (möglich) beheben, aber das mein Problem nicht lösen: IE CSS display: inline-block Rendering issue