css – 修复Edge中的Flex显示[复制]

参见英文答案 > Why don’t flex items shrink past content size?                                    1个
我有以下内容：

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

如果你添加min-width：0;表单控制它跨浏览器工作.

似乎Edge对输入的宽度进行了一些其他计算,并且由于最小宽度默认为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>