分かりづらいタイトルですいません。要はさまざまな横幅のfigure（imgなど）に対して、figcaptionの幅をそのfigureと同じ幅にしたい、というお話です。
やりたいことまとめ
- figureの中にあるimgなどは横幅がさまざまであるという想定
- そのimgなどのさまざまな幅とfigcaptionの幅を揃えたい
- いずれに対しても
width,min-width,max-widthを設定したくない - CSSのみで、可能な限り少ない記述で実現する
実装
See the Pen cssでfigureとfigcaptionの横幅をfigureの中身なりの幅で揃える by ejointjp (@ejointjp) on CodePen.
解説
なんというか、ひとひねりが必要なあたりがWebのレイアウトの難しさ、というか悩ましさであります。まず、100%幅ではなく中身なりの幅となる可変幅ブロックにするために、figure に display: table;を設定。うーん。この時点で既にもやもや感がすごいっす。
現状では、まだ長いcaptionの場合imgより横幅がはみ出してしまいます。そこで、figcaption に display: table-caption; を指定。tableのcaptionはtableの幅を超えない、という特性を利用します。これで、見かけ上は table タグの中に caption タグを入れたのと同じ状態となりました。
仕上げです。tableのcaptionは、通常tableの上側に表示されるので、下に表示するために、figcaption に caption-side: bottom; を指定して、下側に表示させます。以上でほぼ完成！
ですが、imgタグは、昔で言うインライン要素の挙動なので、下に意図しない余白が生じます。というわけで、img タグ（ここでは.myfigure__contentですが）に display: block; を指定し、この余白をなくします。
これにて完成！
というわけで、figureの中身なりの横幅にfigcaptionの幅を合わせることができました。