IE11フレックスボックス内でインラインブロックがオーバーフローするCSS表示

Question

フレックスボックス内に大きな内容のインラインブロック要素を使用していますが、何らかの理由でInternet Explorer 11がこの要素の内容をラップしません。フレックスボックスをスクリーンからはずします。 ChromeとFireFoxでうまくレンダリングされます。私の問題の

例：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; 
} 

私はすでに修正（可能）以下を試してみましたが、それは私の問題を解決しない：で IE CSS display: inline-block Rendering issue

Answer 1

をIE11では、フレックス要素にはある種の幅が定義されている必要があります。あなたのコードにこれを追加します。

main { 
    flex-grow: 1; 
    flex-shrink: 1; 
    width: 100%;    /* NEW */ 
} 

radio-widget { 
    display: inline-block; 
    max-width: 100%;   /* NEW */ 
} 

revised demo

参考文献：

• Why IE11 doesn't wrap the text in flexbox?
• CSS wrap text not working in IE