min-widthとmax-widthについて、理解があやふやなところに、こちらの記事を読んで、詰まったところがあったので、検証して腑に落ちたらいいなと思いました。

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス

min-widthの値がmax-widthの値よりも大きい場合、min-widthの値が要素の幅と見なされます。

この文章が引っかかりました。

文章で覚えるよりも、視覚的に覚えられるとイメージしやすいかもしれません。

検証要素を固定、親要素を動かしてみる

記事にあった例をもとに、親要素の大きさで場合分けをしてみました。
☆ここでは、検証要素（子要素）は
width: 80px、min-width: 50%、max-width: 100%
としています。

width ＜ min-width ＜ max-widthの場合

min-widthはwidthより大きい100px（min-width: 50%）だとして、親要素を200px（max-width: 100%）に設定します。

See the Pen min-widthとmax-width - widthも設定パターン1 by yokoyoko (@yokoyoko_code) on CodePen.

min-width ＜ width ＜ max-widthの場合

min-widthはwidthより小さい50px（min-width: 50%）だとして、親要素を100px（max-width: 100%）に設定します。

See the Pen min-widthとmax-width - widthも設定パターン by yokoyoko (@yokoyoko_code) on CodePen.

min-width ＜ max-width ＜ widthの場合

min-widthはmax-widthよりもwidthよりも小さい30px（min-width: 50%）だとして、親要素をmax-widthよりも小さい60px（max-width: 100%）に設定します。

See the Pen min-widthとmax-width - widthも設定パターン3 by yokoyoko (@yokoyoko_code) on CodePen.

正直、このまとめ方、わかるようでわかりませんでした。幅の大きさ関係で真ん中のものが、選ばれている感じ。

親要素を固定、検証要素を動かしてみる

反対に、検証要素の大きさで場合分けをしてみました。
☆ここでは、親要素は
width: 200px
検証要素（子要素）は
min-width: 50%、max-width: 100%
として、
50％（100px）未満の50px、50〜100%（100px〜200px）の150px、100％（200px）以上の250pxの場合を考えます。

それがこちらです。

See the Pen min-widthとmax-width - widthも設定パターン4 by yokoyoko (@yokoyoko_code) on CodePen.

こちらの方がわかりやすいですね！ 50％〜100％の間でwidthが定まります、というのがはっきりしました。

親要素が動く場合は、レスポンシブでのボタンを想定しました。
子要素が動く場合は、文字数によってまちまちな幅のボタンを想定しました。

max-width ＜ min-width になることはある...？

まさにハマってしまってしまいました。
よくよく考えたら、max-width ＜ min-width は、固定値（px）と%の組み合わせだったらありえる状態になります！混乱しそう。

よくやる使い方

widthが%、min-width,max-widthが固定値
ボタンで使っています。
個人的にはあまり混乱しない使い方です。
min〜maxの間でwidthの割合で可変します。

おわり

前よりは扱い方がわかってきました。困ったらまたこの記事に立ち返ります！