web-dev-qa-db-ja.com

EdgeのFlexディスプレイを修正する

私は次のものを持っています：

.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でも問題ありません）とその修正方法。

csstwitter-bootstrap-3flexboxmicrosoft-edge
5
Serge

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>
8
LGSon