Html 制作一个元素'；s宽度取决于其同级'；s宽度

我正在尝试制作一个小部件，这样字幕就永远不会比标题长。因此，标题将控制小部件的宽度，如果字幕比标题宽，则字幕将自动换行。如果可能的话，我正在尝试不使用JavaScript

我接近了（见下面的片段）。我可以人为地缩短字幕，但即使在这种情况下，由于某种原因，它所在的行也会扩展，以适应容器的整个空间，而不仅仅是其子容器使用的空间！事实上，它所占用的空间正是它不被包装时所占的空间

#容器{
背景：DDD；
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
}
.行{
显示器：flex；
}
#副标题{
弹性基准：0；
}

标题相当长
字幕，这是一个很长的字幕，甚至更长，哦，它真是太棒了！

听起来像是CSS表格：

#容器{
背景：DDD；
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
}
.row>*{
显示：表格单元格；
}
.罗：之后{
内容：“；
显示：表格单元格；
}
#头衔{
宽度：1px；
空白：nowrap；
}

标题相当长
字幕，这是一个很长的字幕，甚至更长，哦，它真是太棒了！

您已经添加了

空白：nowrap到h1标记，使整个宽度

在我的例子中，固定宽度容器不是一个选项——小部件需要有一个动态宽度（基于标题）。这很酷，谢谢。我应该在我的问题中提到。。。标题需要能够包装（如果它变得超长，它需要能够包装成两行，而不是从屏幕上溢出）。有什么想法吗？超长？那是什么？CSS猜不出你想要什么。它需要知道在哪里换行。如果标题与视口一样宽，则需要开始换行到两行。@skitterm如果需要，则需要Javascript。CSS已经走了很长一段路，但是你只能通过这些恶作剧走到这一步。是的，我想我不能既吃蛋糕又吃蛋糕。有意义的是，当前不可能将元素的宽度设置为“流出”，而将其他元素设置为“流入”。