flexの子要素を要素の大きさにしたい。

Question

flexを使い要素を縦に並べています。
background: blueの要素の大きさを中の文字の大きさと一緒にしたいです。
現在だとwidth: '200px'の大きさ分background: blueが指定されています。
どうしたらいいでしょうか？

      <div style={{ width: '200px' }}>
        <div className="flex flex-direction gridgap-5">
          <p>aaaaaaaaaaaaaaaaaaa</p>
          <p>aaaaaaaaaaa</p>
          <div className="flex background-blue">
            <img src="images/test.svg" />
            <p>aaa</p>
          </div>
        </div>
      </div>

div,
span,
li {
  &.flex {
    display: flex;
  }
  &.flex-direction {
    flex-direction: column;
  }
  &.gridgap-5 {
    gap: 5px;
  }
  &.background-blue {
   background: blue
  }
}

Answer 1

React はよくわからないので間違っているかもしれないですが、以下のようにするとどうでしょうか。

  &.background-blue {
   background: blue;
   width: max-content;
  }

Comments

[yyyrrr]

解決できました。ありがとうございます