修复Edge中的Flex显示

Question

我有以下内容:

.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中也可以),以及如何解决它.

Answer 1

如果您添加min-width: 0;到form-control它跨浏览器工作.

似乎Edge对其input宽度进行了一些其他计算,并且由于min-width默认值为auto,它将不允许它小于其计算出的宽度,这min-width: 0可以解决.

将看看我是否可以找到有关此问题的更多信息,以及何时/ if,我将更新此答案.

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