親要素の横幅を子要素の長さに応じて変化させたい

Question

前提・実現したいこと

親要素の横幅を子要素の長さに応じて変化させたい
以下のlistsクラスの縦幅と横幅を子要素の<li>に応じて変化させたいのですがどのように実現できるでしょうか。

<li>要素の文字数に合わせてlistsの横幅を変化させたいです。

試したこと

• max-heightとmax-widthで変化させようとしました。

縦幅は<li>の数によって可変するようになったのですが横幅がうまくいきません。

• <li>のwidthの値によってlistsクラスのwidthが変化してくれるかなと思ったのですが700pxにしかならず..
• <li>にwidthを指定すると残りの部分にmarginができたのでmargin: 0も試してみましたがmarginは消えませんでした

該当のソースコード

<div class="lists">
  <li>samplesamplesamplesample</li> //←ここの文字数にlistsクラスの横幅を合わせてborderを表示させたい
  <li>samplesample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
  <li>sample</li>
</div>

.lists{
  max-height: 200px;
  max-width: 700px;
  border: 1px solid black;
}
li{
    width: 200px;
    marign: 0;
  }

Answer 1

こんばんは。

max-content はいかがですか？

.lists{
  width: max-content;
}
li{
    width: auto;
}

Comments

[dsaf]

max-content!そんな便利なものがあったとは。
瞬殺でした、ありがとうございます!