CSS - Animate parent width when child element is removed - html

Question

I have a div container inside a flex container with set maximum width. When a child is removed the width will decrease. Is it possible to animate the width change with just CSS?
function remove(el) {
var element = el;
element.remove();
}
#flex {
display: flex;
}
#parent {
max-width: 200px;
background: blue;
border: 2px solid green;
height: 100px;
width: auto;
}
#child {
width: 100px;
height: 100px;
background: red;
}
#other {
flex: 1;
height: 100px;
background: yellow;
}
<div id="flex">
<div id="parent">
<div id="child" onclick="remove(this)">
</div>
</div>
<div id="other">
</div>
</div>

Answer 1

You cannot do with pure CSS. The animation is based on the width changes, so you need to set the width of #child to 0 by Javascript. To remove #child completely, you can delay it with setTimeout.
function remove(el) {
var element = el;
el.style.width = 0; //trigger the animation with width changes
setTimeout(() => {
element.remove();
}, 500); //0.5 seconds
}
#flex {
display: flex;
}
#parent {
max-width: 200px;
background: blue;
border: 2px solid green;
height: 100px;
width: auto;
}
#child {
width: 100px;
height: 100px;
background: red;
transition: width 0.5s; /* Width animation in 0.5 seconds */
}
#other {
flex: 1;
height: 100px;
background: yellow;
}
<div id="flex">
<div id="parent">
<div id="child" onclick="remove(this)">
</div>
</div>
<div id="other">
</div>
</div>