自動換行不適用於 Internet Explorer 中的彈性項目

Question

在下面的代碼中，我有一個帶有嵌套 flex 列容器的 flex 行容器。 在 flex 列容器中，似乎自動換行不起作用。

 .profile-header { padding-bottom: 20px; } .profile-header-container { display: flex; justify-content: center; border: 1px solid purple; } .picture { height: 175px; width: 175px; background-color: orange; flex-shrink: 0; } .info { display: flex; flex-direction: column; justify-content: center; align-items: center; } .name { font-size: 24px; border: 1px solid red; } .button { height: 50px; width: 150px; background-color: blue; }

 <div class="profile-header"> <div class="profile-header-container"> <div class="picture"> </div> <div class="info"> <div class="name"> reallylongfirstname reallylonglastname </div> <div class="button"> </div> </div> </div> </div>

.name元素似乎不想在 Internet Explorer 中自動換行，而在 chrome 中它似乎可以正常工作。 我檢查了 flex 錯誤，特別是錯誤 #2，但設置max-width: 100%似乎不起作用。 有沒有辦法讓我完成這項工作？

提琴手

Answer 1

您可以使用 CSS table 來實現相同的布局。

 .profile-header { border: 1px solid green; } .profile-header-container { display: table; margin: 0 auto; border: 1px solid purple; } .picture, .info { display: table-cell; vertical-align: middle; } .picture { display: block; height: 175px; width: 175px; background-color: orange; } .info { text-align: center; } .name { font-size: 24px; border: 1px solid red; } .button { display: block; height: 50px; width: 150px; margin: 0 auto; background-color: blue; }

 <div class="profile-header"> <div class="profile-header-container"> <div class="picture"></div> <div class="info"> <div class="name"> reallyrealylongfirstname reallyreallylonglastname </div> <div class="button"></div> </div> </div> </div>

js小提琴

Answer 2

眾所周知，Internet Explorer 中的 Flex 布局有幾個錯誤。

這里詳細介紹了一個文本換行問題： Why IE11 does not wrap the text in flexbox?

IE 中的文本換行問題通常通過在正確的位置或位置定義寬度來解決。

在這種特殊情況下，為文本元素和父元素定義寬度似乎可以解決問題。

將此添加到您的代碼中：

.info { width: 50%; }

.name { width: 100%; }

修改后的小提琴