The example below demonstrates a situation where the child's width grows with a smooth transition, but the parent's width abruptly changes!
What I aim for is to have both the child's width and the parent's width transition smoothly.
It's important to note that the parent has a max-width specified, but its width is determined by the content, which is the child.
I attempted to add a transition ease property to the parent div, hoping that the width change caused by the child would also transition smoothly.
Feel free to visit https://codepen.io/abstrekt/pen/qBKdPZe for reference.
<div class="parent">
<div class="child">this is the child</div>
</div>
<style>
.parent {
padding: 8px;
display: inline-flex;
border: 2px solid red;
max-width: 300px;
transition: width 1s ease;
}
.child {
white-space: nowrap;
overflow: hidden;
border: 2px solid green;
transition: width 1s ease;
width: 20px;
}
.parent:hover>.child {
width: 100%
}
</style>
I have been searching for a solution to my specific case but have yet to find one.