How can I animate change of the width of .box div element after hovering on the .container? Transition set to 1s works fine for new background color, but it doesn't for the width of the div. What am I doing wrong?
.container {
overflow: visible;
}
.container:hover .box {
width: max-content;
max-width: max-content;
background: green;
}
.box {
min-width: 100%;
width: 100%;
transition: 1s;
overflow: hidden;
background: red;
height: 1rem;
margin-top: 1rem;
}
.box-title {
width: 100%;
color: black;
font-size: 0.9rem;
}<div class="container" style="width: 100px; height: 100px; border: 1px solid red">
<div class="box">
<div class="box-title">Some long text that is not visible until you hover over it</div>
</div>
</div>