有没有任何限制。描述容器不改变。红色容器的宽度？
我尝试了几种配置，例如:溢出，最大宽度和不同的位置到父级。
null
.red {
background: red;
display: inline-block;
box-sizing: border-box;
padding: 10px;
}
.description {
background: green;
}<div class="red">
<div class="description">
very long long long long long long description
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
</div>null
您没有为red设置宽度，但据我所知，您希望得到如下所示的结果。 您可以添加width:0和min-width:100%
null
.red {
background: red;
display: inline-block;
box-sizing: border-box;
padding: 10px;
}
.description {
background: green;
width:0;
min-width:100%;
}<div class="red">
<div class="description">
very long long long long long long description
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
</div>
jquery方法
null
$(document).ready(function(){
let red_w = $('.red').width();
$('.description').css('min-width', red_w);
});.red {
background: red;
display: inline-block;
box-sizing: border-box;
padding: 10px;
}
.description {
background: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red">
<div class="description">
very long long long long long long description
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
<div class="row">
Text text text
</div>
</div>