block要素をinline-block要素っぽく扱う方法

fit-contentを使うことで、block要素でも中身のサイズに合わせてwidthが変わる。（FigmaのHugコンテンツ的な感じ、しらんけど）

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

<style>
.item {
  width: fit-content;
}
</style>

inline-blockとfit-contentの違い

• inline-blockを使えば中身にあわせてwidthが変わってくれるけどinline（横並び）になってしまう
• inline-blockのまま縦並びにするためにflexboxでflex-direction: columnをするとwidthが親コンテンツいっぱいに広がってしまう
  • 解消するにはwidthを指定する or flex-grow / shrink / basisなどを指定するなどわりと面倒

block要素として使いたいけど、widthは子要素によって変わってほしいというときに fit-contentが活躍する。

デモ