仅使用 CSS，我可以在不预先固定父级宽度的情况下将子级限制为父级宽度吗？

Question

这是我的第一个问题，所以我会尽我所能尽可能连贯地表达我的观点。

让我们假设如下：

<div id="parent">
    <div id="child1">shot text</div>
    <div id="child2">very long text</div>
</div

我想问的是有没有办法"link/lock"#child2 的宽度变为#child1 的宽度或#parent 的宽度，这样#child2 永远不会超过#child1 的宽度。

有没有办法，仅使用 CSS，我可以强制#child2（或#parent）与#child1 具有相同的宽度，而无需固定#parent 和#child1 的宽度？

关键是我希望能够即时编辑#child1 和#child2 的内容（如翻译），但由于#child2 总是有更多的单词，所以它总是更宽。

PS：别忘了，只用CSS，不用JavaScript.

编辑：完成 fiddle https://jsfiddle.net/ricardojcmarques/seckdugj/5/

基本上我需要的是绿色框与橙色框的宽度相同，而不给橙色框（也不是棕色框）任何宽度。使用浏览器正确呈现它所需的宽度。

Answer 1

DEMO

有点破解，但它可能有用。

<div id="parent">
<div id="child1">short text that will expand and expand
<div id="child2">very long text that will remain within the confines of child1
</div>
</div>
</div>

#parent {
position:absolute;
background-color:green;
padding:5px;
padding-bottom:0;
}
#child1 {
position:relative;
background-color:#fff;
}
#child2 {
position:absolute;
border:5px solid green;
border-top:none;
margin-left:-5px;
margin-right:-5px;
}

EDIT

看看这个，它和你的有点接近，但我必须修改列表才能嵌套 child2。我不知道您是否需要将特定样式设置为父级 div，但如果您这样做，则需要多加考虑。 Demo2

Answer 2

所以只是根据你的建议即兴创作，这里的关键是设置

#parent{
    background: brown;
    position: absolute;
    left: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

这是一个有效的 JSfiddle

仅使用 CSS，我可以在不预先固定父级宽度的情况下将子级限制为父级宽度吗？

Using only CSS, can I limit a child to the parent width, without previously fixing the parent's width?

html

css

width