最大寬度在IE11中不起作用，顯示內容：表容器和顯示內容：flex children

Question

在下面的代碼中，所有內容均可在Chrome中正確顯示。 .inner元素max-width受max-width限制。

在IE11中， .inner元素擴展到所有內容。

如果我設置.container或.inner元素的display: block ， .container都可以正常工作。 但是我不能這樣做，因為此示例是在許多站點上使用的大型組件中的錯誤的簡短再現，我不想破壞某些內容。

1. 為什么會發生？
2. 如何解決？

 .container { background-color: yellow; display: table; height: 100px; max-width: 277px; } .inner { background-color: red; display: flex; height: 50px; } 

 <div class="container"> <div class="inner">77 777 777 77 7 7777 77 7 7 7 77 7 7 7 77 7 7 7 7 7 77 7 7 7 7 77 7 77 7 7 77 7 7 77 7 7 77 7 7 77 7 7 7 7 7</div> <div class="inner">111 11111 111111111111 111111111111 111111111 111111111111 11111111111 11111111111 11111111 1111111111 11111</div> </div> 

Answer 1

一般來說，您可以預期IE11中的flexbox會出現問題 。

放入<table>元素作為flex容器的父級（通常，表的子級是表單元格），現在您正在尋找麻煩。

最后，添加溢出的內容 ，您只是在請求IE11破壞您的布局。

也就是說，解決該問題的方法是在代碼中添加兩個規則：

  .container { width: 100%; /* new */ table-layout: fixed; /* new */ display: table; max-width: 277px; height: 100px; background-color: yellow; } .inner { background-color: red; display: flex; height: 50px; } 

 <div class="container"> <div class="inner">77 777 777 77 7 7777 77 7 7 7 77 7 7 7 77 7 7 7 7 7 77 7 7 7 7 77 7 77 7 7 77 7 7 77 7 7 77 7 7 77 7 7 7 7 7</div> <div class="inner">111 11111 111111111111 111111111111 111111111 111111111111 11111111111 11111111111 11111111 1111111111 11111</div> </div>