Edge 浏览器：子 div 占用的宽度大于父指定的宽度

Question

我们有一个要求，我们必须在不可编辑的文本框中显示前缀。请在 JSFiddle 中找到 HTML/CSS 代码。每当我们调整 window 的大小时，我都会看到这个问题。

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 class。

这是一个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>

Edge 浏览器：子 div 占用的宽度大于父指定的宽度

Edge browser : child div is taking more width than parent's specified width

html

css

microsoft-edge