IE11 CSS顯示內嵌塊在flexbox內溢出

我在一個彈性框內使用內嵌大塊內容的內聯塊元素，由於某種原因，Internet Explorer 11不會包裝此元素的內容，而是將flexbox在屏幕外。它在Chrome和FireFox中渲染得很好。我的問題IE11 CSS顯示內嵌塊在flexbox內溢出

例子：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

來源

2017-05-29 Mathijs

在IE11中，flex元素必須定義某種寬度。添加到您的代碼：

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

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

revised demo

參考文獻：

來源

2017-05-29 13:42:46

IE11 CSS顯示內嵌塊在flexbox內溢出

回答

相關問題