Разница между width и max-width?

Question

[Mizyha]

Здравствуйте, мне нужно чтобы при наведении мыши на текст плавно изменялась его ширина до 50 пикселей:
длинный текст
#box {
transition: 1s;
}
#box:hover {
width: 50px;
}
Почему не работает этот вариант, но работает такой?
#box {
transition: 1s;
max-width: 100%;
}
#box:hover {
max-width: 50px;
}

Answer 1

[Beeetle]

Вы у своего #box не задаете изначальную ширину, смотрите codepen https://codepen.io/semzhukov/pen/PoYMpZY:

Comments

[Mizyha]

А почему нужно задавать изначальную ширину?

[Beeetle]

Mizyha, прошу прощения, не ширину, а высоту блока. Так как если вы проинспетируете свой код, то увидите, что ширина во всю ширину у #box, а высота 0