CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。 しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。 「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。 古い方法

[coliss]

widthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。

[poliphilus]

Firefox は height には効かんのか。高さがフレキシブルな場合は上下センターが難しい問題いつになったら解決するのか…。

[tkmkg8m]

display: inline-block; → width: fit-content;。グリッドとかでは使ってたけど fit-content って普通のブロック要素でも効くのか👀

[kijtra]

WISYWIGの出力とかで見出し扱うのに便利そうだな。

[makoto15]

オリジンサイトのCSSをこのように記述しておけば、多言語サイトを直す手間が省けるな。

[GiveMeChocolate]

これ便利。早速使った

[mohritaroh]

便利

[kawaosa]

fit-content