flexアイテムの画像の大きさをコントロールする

状況:

• flexbox で画像とテキストを並べようとしたら、画像に指定した `width` が有効にならなかった。

指定した width:30px になっていない

原因、対策のまとめ:

• 原因1: flexbox は子要素 (画像とテキスト) を伸縮させて、親要素の幅に収めようとします。テキストは内容量に応じて柔軟に幅を変え、広がったり縮んだりします。

• 原因2: 画像には `max-width: 100%` が設定されており、画像にwidthを指定しても、親要素の幅を超えて大きくなれない制限がかかっていました。

• 原因3: 原因1と2の組み合わせにより、テキストがスペースを確保し、画像は `max-width: 100%` の制限下で縮小され続けました。結果として、画像は最小限のサイズになり、残りのスペースをテキストが占めることになりました。

• 対策: 画像の `max-width` を `none` に設定し、幅の制限を解除しました。これにより、画像は `width` で指定した幅を確保できるようになり、テキストは残りのスペースを使うようになりました。

仕様どおりの大きさに設定できた

補足:

• `max-width: 100%` は、画像が親要素の幅を超えてはみ出すのを防ぐための一般的なテクニックです。しかし、flexbox のようなコンテキストでは、意図しないサイズ縮小を引き起こす可能性があります。

• flexbox で画像のサイズを制御するには、`flex-shrink: 0;` を設定して縮小を防ぐか、`flex-basis` を使用して初期サイズを指定する方法もあります。