# min-width

> 要素の最小幅を指定するプロパティです。レイアウトの崩れ防止やレスポンシブ対応に役立ちます。フレックスボックスやグリッドと組み合わせることで、柔軟で壊れにくいレイアウトを実現できます。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/min-width/

## 構文

```css
min-width: <length> | <percentage> | auto
```

## Tailwindでは

- `min-w-0` → min-width: 0
- `min-w-full` → min-width: 100%
- `min-w-fit` → min-width: fit-content
- 補足: flexアイテムで省略（…）が効かないときの min-w-0 が頻出。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 最小幅を120pxに設定

```css
min-width: 120px;
```

### 例2: 親要素の50%を下回らないようにする

```css
min-width: 50%;
```

## TIPS

ボタンや入力欄の極端な縮小を防ぐのに便利。

## よくある間違い

min-widthが効かない場合は親要素の幅やbox-sizingを確認。

## AIがよく間違えるポイント

flexアイテムのmin-widthの初期値はautoで「コンテンツの最小幅より縮まない」ため、長いテキストや画像を含むアイテムがはみ出す原因の筆頭です。処方箋はmin-width: 0（またはoverflow: hidden）。この知識はAIの「flexがはみ出す」系の回答から抜けがちなので明示的に確認してください。

## AIへの依頼文例

- flexレイアウトで長いテキストを含むカラムがはみ出す。min-width: autoの仕様を踏まえて修正して

## 関連プロパティ

- [width](https://www.css-dictionary.com/property/width.md)
- [max-width](https://www.css-dictionary.com/property/max-width.md)