html - 使父宽度小于子宽度

Question

是否有一个 CSS 属性允许我保留顶部示例(嵌套 div)的当前结构，但使父级宽度表现得与底部示例(独立 div)一样宽

目前我尝试在父级上使用“显示:内联”，但它仍然延伸到子级的内容宽度。

.parent {
  display:inline-block;
  background: aqua;
}


.how-it-should-look {
  display:inline-block;
  background: aqua;
}

<div class='parent'>
Parent Text
  <div>
  Child Text Child Text Child Text Child Text Child Text Child Text 
  </div>
</div>



<br><br><br>
<div class='how-it-should-look'>
Parent Text
</div>
<br>
<div class='how-it-should-look'>
  Child Text Child Text Child Text Child Text Child Text Child Text 
</div>

基本上我希望上面的例子看起来和下面的例子一样，只是改变了 CSS。

Answer 1

更改为 display:inline 而不是 display:inline-block

.parent {
  display:inline;
  width:auto;
  background: aqua
}

.parent > div{
  display:block;
  width:max-content;
  background:aqua
}

<div class='parent'>
Parent Text
  <div>
  Child Text Child Text Child Text Child Text Child Text Child Text 
  </div>
</div>