flex-shrink

/* 他のアイテムと同じ割合で縮小（初期値） */
.item { flex-shrink: 1;}

/* 縮小しない */
.item-fixed { flex-shrink: 0;}

/* 他のアイテムの2倍の割合で縮小 */
.item-shrink { flex-shrink: 2;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

↑ prefix『-webkit-』が必要

21 以前 ×

Firefox

20 以降 ○

19 以前 ×

Safari

9 以降 ○

8 △

↑ prefix『-webkit-』が必要

7 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

12.1 以降 ○

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8 △

↑ prefix『-webkit-』が必要

7 以前 ×

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN / Can I Use に基づいています。

『flex-shrink』はフレックスアイテムに指定するプロパティで、アイテムの合計サイズがコンテナを超える場合に、各アイテムがどの割合で縮小されるかを制御します。初期値は『1』で、すべてのアイテムが同じ割合で縮小されます。

『flex-shrink』の値は「比率」として働きます。すべてのアイテムが『flex-shrink: 1』（初期値）なら、不足分は均等に縮小されます。特定のアイテムを『flex-shrink: 0』にすると、そのアイテムは縮小されません。

/* コンテナの幅: 400px、アイテムの合計幅: 600px → 不足分: 200px */

/* 全アイテムがflex-shrink: 1の場合 → 均等に縮小 */
.item-a { width: 200px; flex-shrink: 1;}  /* 約133px */
.item-b { width: 200px; flex-shrink: 1;}  /* 約133px */
.item-c { width: 200px; flex-shrink: 1;}  /* 約133px */

/* item-aだけflex-shrink: 0の場合 → 縮小されない */
.item-a { width: 200px; flex-shrink: 0;}  /* 200px（固定） */
.item-b { width: 200px; flex-shrink: 1;}  /* 100px */
.item-c { width: 200px; flex-shrink: 1;}  /* 100px */

/* サイドバーは縮小させず、メインコンテンツだけ縮小させる */
.layout {
    display: flex;
}
.sidebar {
    width: 250px;
    flex-shrink: 0;  /* サイドバーは固定幅 */
}
.main {
    flex-grow: 1;
    flex-shrink: 1;  /* メインは縮小OK */
}

固定幅にしたい要素（ロゴ、アイコン、サイドバーなど）には『flex-shrink: 0』を指定するのがベストプラクティスです。『width』だけでは、コンテナが狭くなったときに意図せず縮小されてしまいます。

フレックスアイテムの『min-width』の初期値は『auto』で、アイテムの内容（テキストや画像）の最小サイズ以下には縮小されません。『flex-shrink: 1』を指定していてもテキストがはみ出す場合は、『min-width: 0』を指定することで内容以下のサイズまで縮小できるようになります。

/* テキストがはみ出す場合の対処 */
.item {
    flex-shrink: 1;
    min-width: 0;       /* 内容以下のサイズまで縮小可能に */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}