边缘浏览器：子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;
}

注意：此代码适用于除Edge之外的所有浏览器。

问题：

Answer 1

这绝对不是一个理想的解决方案，但它是我能想到的最好的解决方案。

Edge似乎将默认min-width应用于输入元素，如果max-width或min-width由CSS设置，则会删除该元素。

如果识别出来，修复页面就像向min-width: 0;课程添加uniqueName一样简单。

这是updated fiddle。我删除了.publisherPrefix上的Flexbox样式，因为它们是不必要的。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;