Html 为什么'；当我申请了保证金时，我的箱子不会随着内容的增长而增长吗？

我有以下问题：我有一个盒子，里面有一些内容。我希望他们两个都能以同样的速度和比例增长。但是，它仍然会发生变化，因此在小状态和大状态下，换行符是不同的

如果我删除了边距，它会工作，但是边距/填充很重要。 我有以下代码：

.box{
宽度：100px；
高度：100px；
背景：#f00；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：所有2s线性；
}
.内容{
字体大小：6px；
过渡：字体大小2秒；
利润率：0.20px；
文本对齐：居中；
过渡：所有2s线性；
}
.box:悬停{
宽度：300px；
高度：300px；
}
.box:悬停.content{
字号：18px；
}

JS-Bin
Lorem ipsum dolor sit amet，奉献精英。

如果我理解正确，您希望保持行数不变，并使过渡看起来更平滑。然后可以使用

transform:scale（n）

更改元素的大小：

.box{
宽度：100px；
高度：100px；
背景：#f00；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：所有2s线性；
变换原点：左上；
}
.内容{
字体大小：6px；
过渡：字体大小2秒；
利润率：0.20px；
文本对齐：居中；
过渡：所有2s线性；
变换原点：左上；
}
.box:悬停，
框：悬停。内容{
变换：尺度（3）；
}

Lorem ipsum dolor sit amet，奉献精英。

如果我理解正确，您希望保持行数不变，并使过渡看起来更平滑。然后可以使用

transform:scale（n）

更改元素的大小：

.box{
宽度：100px；
高度：100px；
背景：#f00；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：所有2s线性；
变换原点：左上；
}
.内容{
字体大小：6px；
过渡：字体大小2秒；
利润率：0.20px；
文本对齐：居中；
过渡：所有2s线性；
变换原点：左上；
}
.box:悬停，
框：悬停。内容{
变换：尺度（3）；
}

Lorem ipsum dolor sit amet，奉献精英。

你能再解释一下吗。在较小的状态下，我看不到代码与预期结果之间有任何差异，内容分为3行。当我悬停时，它会变为2行。你想让它保持在3行吗？是的，相对于鹦鹉的确切位置和大小。你能进一步解释一下吗。在较小的状态下，我看不到代码与预期结果之间有任何差异，内容分为3行。当我悬停并且它增长时，它会变为2行。你想让它保持在3行吗？是的，精确的位置和大小相对于鹦鹉