ボタンの最低幅を設定しつつ、かつコンテナが縮小してもはみ出さないようにするCSS
ボタンのラベルが短い場合でも、ボタン自体には最低限ある程度の幅を持たせたいという場合がある。そんなときには、ボタン自体にmin-width
を指定して最低幅を設定する。
button {
min-width: 10em;
}
しかし、そのボタンを配置するコンテナの幅が、ボタン自体のmin-width
の値よりも狭くなってしまうこともある。すると、ボタンがコンテナをはみ出してしまう。

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