フィットする

ある案件で、サムネイル上に要素を縦に並べる必要があり、試行錯誤した際、発見があったので、メモ。サムネイルの見出しや2つの属性情報を掲載する際、サムネイルにposition: relative;して、見出しや2つの属性情報にそれぞれ、position: absolute;しました。しかし、スマホで見ると、文字が折り返され、情報が隠されてしまう事象が発生。これはイカンと思い、見出しや属性情報をラップし、そこにposition: absolute;し縦に並べることで、文字が折り返しても、他の情報を隠すことなく表示ができました。しかし、2つの属性情報にdisplay: inline-block;をいれて、横幅を親要素いっぱいに広げない形にすると、縦に並ばず、段落ちしてしてしまいます。他に何か良い方法がないかと探っているとピッタリフィットするやり方がありました。それがこちらです。かつて使ったことがあったのに忘れてました。。。でも、inline-blockの代わりというのは記事を読んで学んだことなので、これは良い発見です。ありがとう！

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

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコン…

コリス

width:fit-content;