IE11 CSS显示内联块在flexbox内溢出

Posted 2023-03-05

【中文标题】IE11 CSS显示内联块在flexbox内溢出

【英文标题】：IE11 CSS display inline-block overflowing inside flexbox

【发布时间】：2017-10-29 20:02:19

【问题描述】：

我正在使用一个 inline-block 元素，该元素在 flex-box 中包含大量内容，并且出于某种原因 Internet Explorer 11 不会包装该元素的内容，而是将 flexbox 推出屏幕。它在 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

【参考方案1】：

在 IE11 中，flex 元素必须定义某种宽度。将此添加到您的代码中：

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