親要素のwidthを子要素のwidthに合わせる

これは、ボタン的な要素で要求される。

普段は親要素は可能な限り子要素の最大の幅になっていて欲しい。

幅が小さくなったときにはみ出して欲しくない場合には、以下のような要件が追加される。

親の親要素の幅があるサイズ以下(通常は親要素の幅)になった時、親要素も縮まって、内側も折り返して欲しい。

何が問題か

HTMLはフロー型のレイアウトシステムであるため、ブロック要素の height は内側の要素の height でボトムアップで決まってしまう。width は逆に外側の要素のサイズ(body 要素の場合はクライアント領域の width)でトップダウンで決まる。(これが直感的ではない。)

Flexbox でもこのややこしい問題はまだ解決できていない模様。

結局 width 属性に特殊なキーワードを渡して解決する方向に向かっている。

width

max-width

min-width

max-width, min-width と width とは同時に設定できる。

min-content

簡単に言うと、内側の要素で最大の width を採用する。(これ以上縮めることができないサイズ)

max-content

簡単に言うと、内側の要素を全部並べた時の width を採用する。(これ以上広げても意味がないサイズ)

fit-content

max(‘min-content’, min(‘max-content’, ‘available’))

簡単に言うと、内側の要素を外側のギリギリまで広げる。ただし、min-content よりは必ず大きくする。

今のところ、最も安全な選択肢

これはブロック要素をインライン要素のように扱うレイアウトの仕組み。

インライン要素では、width は内側の要素の width を使うようになる。

(要するにやや目的外利用)

inline-block はインライン要素になるため、前後の要素が横並びに(インラインに)なる。

float を指定する方法 (現代では良くない方法)

元々 float は、ブロックを文章の中で「浮かせて移動させる」というレイアウトの仕組み。

文章を避けて配置しようとするため、結果的に内側の要素の width を使う。

(要するに完全に目的外利用)

float を解除するには、clear: both; を指定する必要がある。

float:left;

clear:both;

単純に最初から span 要素を使えばよいのでは?

使ってよいならそちらの方が望ましい。

多くの場合、div 等の要素が先に決まっていて、その中でどうするかという話になってしまっている。

span 要素には height の設定が効かない。(内側の要素の高さの方が優先なので。) div 要素なら height の設定が効く。

関連