Html 如何使用过渡动画更改子级、包裹的div宽度

在将鼠标悬停在

.container

上后，如何设置

.box

div元素的

宽度的更改动画？过渡设置为1s对于新的背景色很好，但是对于div的宽度却不行。我做错了什么


.container{
溢出：可见；
}
.container:hover.box{
宽度：最大含量；
最大宽度：最大内容；
背景：绿色；
}
.盒子{
最小宽度：100%；
宽度：100%；
过渡：1s；
溢出：隐藏；
背景：红色；
高度：1公厘；
页边顶部：1rem；
}
.方框标题{
宽度：100%；
颜色：黑色；
字体大小：0.9rem；
}

某些长文本在您将鼠标悬停在其上之前不可见
max content是一种状态，您无法从某个xy值设置动画到某个状态。有没有办法在不猜测预期宽度的情况下将其与内容匹配？恐怕没有。