让一个子 div 扩展父项的宽度，第二个子项只填充父项

Question

有一个父级div有两个子级-child1和child2。

<div class="parent">
<div class="child1"></div>
<div class="child2">
<p>Some long text...</p>
</div>
</div>

我希望parent通过child1div扩展其宽度(例如，如果child1的宽度=200px，则parent的宽度相同(。

在child1下面，应该有child2div，并填充父级宽度的100%(由child1设置(，但不要进一步扩展父级宽度(例如，如果有一段很长的文本，它应该以200px换行(。

如何使用CSS实现这一点？

Answer 1

您需要在父母的max-width上设置min-content。这将把最大宽度缩小到它能容纳的最小单词。然后将第一个子对象的宽度设置为max-content，以强制父对象扩展到此设置的宽度。

.parent {
max-width: min-content;
}
.child1 {
width: max-content;
}

<div class="parent">
<div class="child1">The width should stop here</div>
<div class="child2">
<p>Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text </p>
</div>
</div>