エッジブラウザ：子divが親の指定した幅よりも幅が広い

Question

編集可能ではないテキストボックス内にプレフィックスを表示する必要があるという要件があります。 HTML/CSSコードはJSFiddleにあります。ウィンドウのサイズを変更するたびに、私はこの問題を見ることができます。

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

これは間違いなく理想的なソリューションではありませんが、それは私が思い付くことができた最高でした。

エッジがmax-width場合は削除された入力要素にデフォルトmin-widthを適用し、またはmin-widthがCSSで設定されているようです。

これが認識されると、uniqueNameクラスにmin-width: 0;を追加するだけで簡単にページを修正できます。

ここにはupdated fiddleがあります。あなたのフレックスボックスのスタイルは、不要だったので、.publisherPrefixで取り除きました。

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