高さが指定されていないコンテンツのheigt(高さ)は、内包しているコンテンツの高さに依存しています。
width(幅)についても同じような振る舞いをさせたいときのtipsです。

内包するコンテンツの大きさに応じて幅を可変させる

figureとfigcaption使って画像とキャプションを表示させる際に、imgに指定した画像のサイズにキャプションがぴったりくるようにしたい場合を例として考えます。
このときfigureがギャラリーのように複数並んでいて、画像のサイズがばらばらな場合だと個別にサイズ指定するのは面倒です。

ここでは、今回の要件がぴったりはまります。
imgに合わせて、figureの幅が可変するようなCSSを記述します。
たった１行です。

css

figure {
  width: min-content;
}

min-contentとは

CSS3で新しく定義されたキーワードmin-contentは、
　その要素が内包している要素の中で、分割できない項目のうち、最大の大きさを持つ要素に基づいて幅を決定します。
「最大の大きさを持つ要素」とは、一番長い単語、画像、固定幅のコンテンツなどが該当するでしょう。

test

IEのフォローバック

残念なことにIEではこのキーワードに対応していません。
打開案としてのフォローバックとしては、max-widthプロパティをカスケーディングすることで解決しましょう。

css

figure {
  max-width: 350px; // 適切な幅を与える
  max-width: min-content;
}

他のキーワード

補足として、他のキーワードに、 max-contentとfit-contentがあります。

max-content

min-contentと逆の働きで、要素が内包している要素の中で、最大の大きさを持つ要素に基づいて幅を決定します。
親要素より幅が大きくなった場合は、親を突き抜けるような挙動になります。(inline-blockを指定したような感じ)

fit-content

内包されたコンテンツをすべて含むことができるサイズまで要素が広がり、親要素より大きくならないように最大値が定義されコンテンツが折り返されます。(floatとかtable-cellみたいに)

参考

• 仕様書

おわります。