Edge browser: дочерний 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; 
} 

Примечание: Этот код работает во всех браузерах, кроме Edge.

Издание:

Answer 1

Это, безусловно, не является идеальным решением, но это было лучшее, что я смог придумать.

Похоже, что Edge применяет по умолчанию min-width к входным элементам, который удаляется, если max-width, или min-width задается CSS.

Если это признано, фиксация вашей страницы становится такой же простой, как добавление min-width: 0; к классу uniqueName.

Адрес updated fiddle. Я удалил стили Flexbox на .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>