防止父级扩展时子p标签扩展

Question

我正在处理HTML和CSS代码，并尝试防止父级展开时子级div文本展开。我希望子div保持自己的宽度。

我尝试为子div添加固定宽度，但它没有响应。我尝试使用scaleX（），但无法正常工作。

HTML forfor扩展

<div class="parent col-2">
<div class="child"><p>some long text</p></div>
</div>

展开后的HTML

<div class="parent col-3">
<div class="child"><p>some long text</p></div>
</div>

<style>
 .parent {
 transition: flex 0.5s ease-in-out;
 }
</style>

我希望子div即使在扩展父div时也能保持相同的宽度。

更新

code

单击该按钮时，它将展开父div，子div中的文本将被展开为（显然）。我想保留子div的文本宽度-不扩展-仅父div扩展。

• 我尝试的另一种方法是防止孩子受到父母过渡的影响。

Answer 1

最大宽度，最小宽度，宽度->一起在子元素中很有用

显示：阻止或显示：内联阻止->如果您的元素具有默认的显示：内嵌

框大小：边框框->如果您的元素不适合您的需要，则可以尝试使用该元素

别忘了阅读有关这些道具的文档，希望对您有所帮助

.child {
  max-width: 640px;
  width: 100%;
  min-width: 300px;
}

<div class="parent col-3">
  <div class="child"><p>some long text</p></div>
</div>