css 子要素のwidthの大きさに合わせたい

Question

reactとスタイルはscssを使って開発しています。
{text}の文字列の長さによって親要素のdivタグwidthの大きさを変更したいです。
今だと{text}の文字の長さに関係なく横幅いっぱいに表示されてしまいます。
どういうスタイルを当てたらいいのでしょうか？

   <div className="px-9 py-2 flex background-blue">
    <p>
     {text}
    </p>
   </div>

Answer 1

そのdiv要素に display: inline-block; を設定すればいいでしょう。

Answer 2

hatena19さんのご回答の他、以下のような方法もあります。

• width: max-content
• float: left
• position: absolute
• display: table-cell
• 親要素に display: flex