MRRI

display: flex を使ったレイアウトで、子要素の幅（width）が正しく適用されない問題に直面したことはありませんか？その原因の一つに flex-shrink プロパティがあります。
flex-shrink は、要素が親コンテナ内に収まりきらない場合に縮小される割合を指定するプロパティです。デフォルト値は 1 なので、子要素は自動的に縮小される場合があります。このため、指定した width が無視されるように見えるのです。

解決方法

子要素に以下を設定するだけで、問題を解決できます！

.class {
flex-shrink: 0;
}

この設定により、子要素は親コンテナのサイズに合わせて縮小しなくなり、指定した width が正しく適用されます。