html - 在 css 中使用 fit-content 自动调整宽度

Question

我正在尝试使用 min-width 和 fit-content 来防止父部门小于它的子部门。

我首先使用 min-width: fit-content 设置一个分区 .parent。然后我添加了一个 width: 100px 和 min-width: fit-content 的 child 。最后，我给 children 添加了足够多的字符来破坏 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>

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

我希望 parent 适合 child 的内容，适合 Angular 色的内容。

奇怪的是，如果我将子项的宽度更改为 1%，则 min-width 得到遵守。

Answer 1

代码正常运行。父 div 只会将其宽度拉伸(stretch)到其中的内容，即子 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>