monthly gimite

試験運用中。

Flexboxとを組み合わせるときはsize="1"が必要

<div style="display: flex;">
  <div style="flex: 1 1 auto;">hoge:</div>
  <input type="text" style="flex: 1 1 auto;">
</div>

とした場合のこのinput要素、画面サイズが大きいぶんにはちゃんと伸びてくれるのですが、画面サイズが小さい場合にある程度以上小さくなってくれません。

<div style="display: flex;">
  <div style="flex: 1 1 auto;">hoge:</div>
  <input type="text" size="1" style="flex: 1 1 auto;">
</div>

size="1" をつければ良いようです。sizeを省略した場合はデフォルトのsizeが適用されるわけですが、その幅以下には縮んでくれないようです。ちなみにsize="0"は不正な値なようで、駄目でした。動作確認はChrome