max-content

コンテンツの幅に等しくなる

例

https://gyazo.com/9c90365befb5ee2c7b404d9585318df9 https://developer.mozilla.org/ja/docs/Web/CSS/max-content#sizing_grid_columns_with_max-content

mdnのやつをちょっと修正したもの

前提として、widthの指定なので、block-level elementが対象になる

これらはdivなので、何も指定しないと横いっぱいに広がる(normal)

下2つがwidth: max-contentを指定したもの

親より小さい場合は、幅だけ見るとinline-level elementと同じ感じになる

ただし、あくまでもフロー方向は垂直方向なのでinline-level elementとは全く違うmrsekut.icon

e.g.

width: max-contentのようにして使う