修复 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 求解的计算宽度。

我会看看是否可以找到有关此问题的更多信息，when/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>

修复 Edge 中的 Flex 显示

Fix the Flex display in Edge

css

flexbox

twitter-bootstrap-3

microsoft-edge