[解決済み] cssのfit-contentで横幅を自動サイズ調整する

質問

親ディビジョンが子ディビジョンより小さくなるのを防ぐために min-width と fit-content .

まず、分割を設定します。 .parent を持つ min-width: fit-content . 私は、次に、子プロセスに width: 100px と min-width: fit-content . 最後に、子プロセスに十分な文字数を追加して 100px ;

.parent {
  border: 1px solid red;
  width: fit-content;
}

.children {
  border: 1px solid green;
  min-width: fit-content;
  width: 100px;
}

<div class="parent">
  <div class="children">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
</div>

DEMO https://codepen.io/osasseville/pen/NadrgB?editors=1100

親が子の内容に合わせて、文字の内容も合わせてくれることを期待します。

不思議なことに、子供の幅を1%に変更すると min-widthは尊重されます。 .

解決方法は？

コードは正常に動作しています。親 div はその中にあるコンテンツ、つまり子 div までしか幅を伸ばせません。

また、ここでは子 div の幅を 100px と定義しているので、親 div の幅も 100px までしか広がらず、子 div の外にはみ出したテキストについては、親 div のコンテンツとしてみなされません。

親が子のコンテンツにフィットするようにしたい場合は、子 div の幅を fit-content に変更する必要があります。

このように

.parent {
  border: 1px solid red;
  width: fit-content;
}

.children {
  border: 1px solid green;
  width: fit-content;
}

<div class="parent">
  <div class="children">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
</div>