我正在尝试使用min-width
和fit-content
阻止父分区小于子分区。
我首先用.parent
设置了一个分区min-width: fit-content
。然后,我添加了一个带有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 色的内容。
奇怪的是,如果我将 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>