ボタンの最低幅を設定しつつ、かつコンテナが縮小してもはみ出さないようにするCSS

ボタンのラベルが短い場合でも、ボタン自体には最低限ある程度の幅を持たせたいという場合がある。そんなときには、ボタン自体にmin-widthを指定して最低幅を設定する。

button {
  min-width: 10em;
}

しかし、そのボタンを配置するコンテナの幅が、ボタン自体のmin-widthの値よりも狭くなってしまうこともある。すると、ボタンがコンテナをはみ出してしまう。

ボタンの幅をコンテナに収めるためにはmax-width: 100%が使えそうにも思えるが、min-widthの方が優先されてしまうので機能しない。そこで、min-widthの値としてmin()を使うようにする。

button {
  min-width: min(10em, 100%);
}

このようにすると、min-widthの値が100%を超えることを防げる。

See the Pen PoRdReV by Yuhei Yasuda (@yuheiy) on CodePen.

後日追記: min()とすべきところを誤ってmax()と表記してしまっていたことをご指摘いただいたため、内容を修正した。