我正在尝试使用min-widthfit-content阻止父分区小于子分区。

我首先用.parent设置了一个分区min-width: fit-content。然后,我添加了一个带有width: 100pxmin-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 色的内容。

奇怪的是,如果我将 child 的宽度更改为1%,则最小宽度被尊重为

最佳答案

该代码正在按预期方式工作。父div只会将其宽度扩展到其内部内容,即子div。

在这里,您已将子级div的宽度定义为100px,因此父级div的宽度也只会扩展到100px,并且在子级div之外溢出的文本不会被视为父级div的内容。

如果希望父项适合 child 的内容,则应将子div的宽度更改为适合内容

像这样

.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>

10-05 21:03
查看更多