i wanna make the parent width size to fit the children instead of being 100% of the page and fit-content is not working

Question

.box {
background: gold;
width: 300px;
height: 200px;
margin: auto;
}

.container {
animation-name: pop;
animation-duration: 4s;
display: inline;
width: fit-content;
}

@keyframes pop {
0% {
transform: scale(1);
}
25% {
transform: scale(1.3);
}
50% {
transform: rotate(45deg);
background: tomato;
}

100% {
transform: rotate(0);
}
}
<--html-->

<div class="container">
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iusto,
deleniti facere itaque, pariatur nobis natus hic, saepe exercitationem
</div>

<div class="box box-special">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut iusto,
deleniti facere itaque, pariatur nobis natus hic, saepe exercitationem
</div>
</div>

Answer 1

Eddie
perhaps you shouldn't be using display:inline; for your .container

try using

.container{
....
display: inline-block;
....
}