主にFirefoxでflexを使ったときにwidthが効かないときがある #CSS

HTML


<div class="wrap">
  <input type="text">
  <span>-</span>
  <input type="text">
</div>

SCSS

.wrap {
  display: flex;
  align-items: center;
  width: 300px;
  span {
    display: block;
    width: 20px;
    text-align: center;
  }
  input {
    flex: 1;
  }
}

これだとspanのwidthが効かない

bugfix

.wrap {
  input {
    min-width: 0;
  }
}

多分幅が足りない？押し出されちゃって効かないっぽい。
主にfirefoxで起こる。

デモ：flexを使ったときにwidthが効かないときがある
参考：https://stackoverflow.com/questions/34199345/text-overflow-ellipsis-and-flex-not-working-on-firefox