ワードエクスプローラーは、エクスプローラーのフレックスアイテムでは機能しません

Question

次のコードでは、ネストされたフレックスコラムコンテナーを持つフレックスローコンテナーを使用しています。フレックスコラムコンテナでは、ワードラップが機能しないように見えます。

.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要素は、クロムで正常に動作するよう、インターネットエクスプローラで、ワードラップしたいとは思われません。私はフレックスバグ、特にバグ＃2をチェックしましたが、max-width: 100%を設定しても動作していないようです。私はこの仕事をすることができる方法はありますか？

jsfiddle

Answer 1

あなたは同じレイアウトを実現するためにCSSのテーブルを使用することができます。 Internet ExplorerでのFlexレイアウトはいくつかのバグがあることが知られている

.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>

jsFiddle