邊緣瀏覽器：小孩div比父母指定的寬度寬度更大

Question

我們有一個要求，我們必須在不可編輯的文本框內顯示前綴。請在JSFiddle找到HTML/CSS代碼。每當我們調整窗口大小時，我都會看到這個問題。

HTML：

<div class="uniqueNameContainer" dir="ltr"> 
    <div title="Publisher prefix" class="publisherPrefix">new_</div> 
    <input name="uniquename" class="uniqueName" type="text" maxlength="36"> 
</div> 

CSS

.uniqueNameContainer{ 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    font-size: 14px; 
    color: #333333; 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    border: 1px solid #999999; 
    background-color: #ffffff; 
    width:50%; 
} 

.publisherPrefix{ 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -ms-flex-align: center; 
    align-items: center; 
    color: #888888; 
} 

.uniqueName{ 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    font-size: 14px; 
    color: #333333; 
    width: 100%; 
    border: 0; 
} 

注：此代碼工作在所有瀏覽器，除了邊緣。

問題：

Answer 1

這絕對不是一個理想的解決方案，但它是我能夠拿出最好的。

似乎邊緣應用默認min-width輸入的元素，如果max-width或min-width由CSS設置，則刪除該元素。

當確認這一點時，修復您的頁面變得非常簡單，只需將min-width: 0;添加到uniqueName類。

這是updated fiddle。我在.publisherPrefix上刪除了您的flexbox樣式，因爲它們是不必要的。

.uniqueNameContainer { 
 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
 
    font-size: 14px; 
 
    color: #333333; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    border: 1px solid #999999; 
 
    background-color: #ffffff; 
 
    width: 50%; 
 
} 
 

 
.publisherPrefix { 
 
    color: #888888; 
 
} 
 

 
.uniqueName { 
 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
 
    font-size: 14px; 
 
    color: #333333; 
 
    min-width: 0; 
 
    width: 100%; 
 
    min-width: 0; 
 
    border: 0; 
 
}

<div class="uniqueNameContainer" dir="ltr"> 
 
    <div title="Publisher prefix" class="publisherPrefix">new_</div> 
 
    <input name="uniquename" class="uniqueName" type="text" maxlength="36"> 
 
</div>