input 要素に flex-shrink が効かないときの対処法

以下のリンクを参考に type="number" の input 要素に size="1" を指定しても、flex-shrink が効かなかったため、width: 0 を指定したら解決した。（Chrome 110.0.5481.100 で再現）

https://gimite.hatenablog.com/entry/20151226/1451145030

FireFox の場合は size="1" の指定でも対処可能。

<label class="wrapper">
  <div class="left">ラベル</div>
  <input type="text" />
</span>

<style>
  .wrapper {
    width: 160px;
    padding: 20px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
    display: flex;
    gap: 20px;
  }

  .left {
    width: 3em;
    flex-shrink: 0;
    flex-grow: 0;
  }

  input[type="text"] {
    width: 0;
    flex-shrink: 1;
    flex-grow: 1;
  }
</style>

width="0" 指定前

width="0" 指定後