Css 如何使div不传播它'；s自身宽度

我想要这样的设置：

.---------------.
| .-----------. |
| |  title    | |
| '-----------' |
| .----. .----. |
| | A  | | B  | |
| '----' '----' |
'---------------'

其中，

title

不推进其自身的宽度，而是适应

A

和

B

指定的宽度

我现在有

<div class="row">
    <div class="title">this text needs to break, too long</div>
    <div class="cell"> I am AAAA    </div>
    <div class="cell"> I am BBBB    </div>
</div>

<style>
 .row  {margin: 30px; display: inline-block;}
 .cell {margin: 10px; display: inline-block;}
 .title {overflow: auto; clear:both}
</style>

此文本需要打断，太长
我是AAAA
我是BBBB
.行{边距：30px；显示：内联块；}
.cell{margin:10px；display:inline block；}
.title{溢出：自动；清除：两个}

---

但是

title

不会在这里中断。

调整0内部div以阻止其增长

.outer{
显示器：flex；
证明内容：中心；
}
.尺寸限制{
弹性：0；
}
.r{背景色：红色}
.b{背景色：蓝色}
.y{背景色：黄色}

A部分
乙部
丙部

调整0内部div以阻止其增长

.outer{
显示器：flex；
证明内容：中心；
}
.尺寸限制{
弹性：0；
}
.r{背景色：红色}
.b{背景色：蓝色}
.y{背景色：黄色}

A部分
乙部
丙部

A和B的宽度将是动态的？或使用%或值定义？使用flexbox。它是为解决这个问题而创建的。@TemaniAfif A和B的宽度将由它们的content@Shammoo向我们展示一个使用flex的解决方案：）我不知道如何使用flex实现它，所以我很乐意看到它！嗯，我看不到不使用javascript的解决方案…A和B的宽度将是动态的？或使用%或值定义？使用flexbox。它是为解决这个问题而创建的。@TemaniAfif A和B的宽度将由它们的content@Shammoo向我们展示一个使用flex的解决方案：）我不知道如何使用flex实现它，所以我很乐意看到它！嗯，如果不使用javascript，我看不到解决方案……是的，但是，删除固定宽度，添加更多文本，并且……这不是我的问题：）我想你们并没有读过。。。首先，您更改了整个html结构，然后如@sinisake所说。因此，此解决方案不满足任何要求只要添加

.title{overflow:auto；clear:both；white space:nowrap；}

，并将该类添加到div包装部分A（如果您需要的话）。。。我给了你你需要遵循的结构，我不应该为你写整个程序。。。我给了你一个一般的POC来解决这个问题。同样，这不是我的问题：）我知道如何使用javascript。。。这个网站的目的是提供一个完整的解决方案，而不是解决方案简单部分的10%，因为你所做的是很常见的，你没有添加任何内容。是的，但是，删除固定宽度，添加更多文本，并且……这不是我的问题：）我想你没有读过它。。。首先，您更改了整个html结构，然后如@sinisake所说。因此，此解决方案不满足任何要求只要添加

.title{overflow:auto；clear:both；white space:nowrap；}

，并将该类添加到div包装部分A（如果您需要的话）。。。我给了你你需要遵循的结构，我不应该为你写整个程序。。。我给了你一个一般的POC来解决这个问题。同样，这不是我的问题：）我知道如何使用javascript。。。这个网站的目的是提供一个完整的解决方案，而不是解决方案简单部分的10%，因为你所做的很常见，你没有添加任何内容。