修复Edge中的Flex显示[重复]答案

【问题标题】：Fix the Flex display in Edge [duplicate]修复Edge中的Flex显示[重复]
【发布时间】：2018-03-09 05:35:13
【问题描述】：

我有以下：

.flex { display: flex; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
                                                                    rel="stylesheet"/>
<div class="flex">
  <input class="form-control" />
  <div class="flex">
    <input class="form-control" value="123456789" />
    <input class="form-control" value="123456789" />
  </div>
</div>

为什么我在 Microsoft Edge 中看不到完整的最新输入（即使在 IE 中也可以），以及如何修复它。

【问题讨论】：

为什么我在 Microsoft Edge 中看不到完整的最新输入（即使在 IE 中也可以），以及如何修复它。 请参阅 浏览器渲染说明 部分在副本中。
@Michael_B 我同意，我的问题和其他人的答案有一些相似之处。但是，我几乎不会将这两个 questions 标记为重复...
对。除了绝大多数人不是为了问题来 Stack Overflow 的。他们来寻找答案。这就是价值所在。因此，副本的标题说：这个问题已经有一个 答案这里。
事实上，两个问题可能完全不相关。但是，正如标题中的语言所暗示的那样，如果它们共享相同的解决方案，则可以将其作为重复项关闭。

标签： css twitter-bootstrap-3 flexbox microsoft-edge

【解决方案1】：

如果你将min-width: 0; 添加到form-control 它可以跨浏览器工作。

Edge 似乎对input 的宽度进行了一些其他计算，并且由于min-width 默认为auto，它不允许它小于其计算宽度，min-width: 0 解决了这个问题.

我会看看我是否可以找到有关此问题的更多信息，以及何时/如果，我将更新此答案。

.flex { display: flex; }
.form-control { min-width: 0; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="flex">
  <input class="form-control" />
  <div class="flex">
    <input class="form-control" value="123456789" />
    <input class="form-control" value="123456789" />
  </div>
</div>

【讨论】：

@Serge 添加了第一个解释，不过会看看我是否能找到错误报告或其他内容。