Html 将元素插入flexbox而不添加/删除CSS类时的CSS转换

假设我没有访问JavaScript的权限，只能编辑CSS

我仍然应该能够定义一个转换，当JS（我不控制）将新元素插入flex容器时，容器会平滑地变宽，对吗

//为了本演示的目的（使其对我的实际挑战有用），
//唯一“允许”的JS是在容器中添加或删除项目的JS。
函数insertOrderDeleteExtraElement（）{
const div=document.getElementById（“新”）；
如有需要（分区）{
div.parentNode.removeChild（div）；
}否则{
const newDiv=document.createElement（'div'）；
newDiv.innerHTML=“插入或删除此项将使容器的宽度平滑过渡，以遵守过渡持续时间。”；
newDiv.id=“新建”；
document.getElementById（“容器”）.appendChild（newDiv）；
}
}

#容器{
边框：2个蓝色虚线；
显示：内联flex；
柔性包装：包装；
最大宽度：250px；
过渡：所有1；
}
输入{
弹性：1100像素；
过渡：所有1；
}
#新的{
弹性：1100%；
显示：块；
边框：1px纯红；
高度：120px；
过渡：所有1；
}
.老{
背景：#ccc；
边框：1px纯黑；
}

点击这里


老分区

对于插入，您可以执行以下操作。我怀疑你会有运气删除，因为CSS不能删除事件做一些事之前

//为了本演示的目的（使其对我的实际挑战有用），
//唯一“允许”的JS是在容器中添加或删除项目的JS。
函数insertOrderDeleteExtraElement（）{
const div=document.getElementById（“新”）；
如有需要（分区）{
div.parentNode.removeChild（div）；
}否则{
const newDiv=document.createElement（'div'）；
newDiv.innerHTML=“插入或删除此项将使容器的宽度平滑过渡，以遵守过渡持续时间。”；
newDiv.id=“新建”；
document.getElementById（“容器”）.appendChild（newDiv）；
}
}

#容器{
边框：2个蓝色虚线；
显示：内联flex；
柔性包装：包装；
最大宽度：250px；
过渡：所有1；
}
输入{
弹性：1100像素；
过渡：所有1；
}
.老{
背景：#ccc；
边框：1px纯黑；
}
#新的{
弹性：110；
边框：1px纯红；
动画：向前增长1秒；
身高：0；
弹性基准：0；
最小宽度：0；
溢出：隐藏；
}
@关键帧增长{
到{
高度：120px；
弹性基准：100%；
}
}

点击这里


老分区

可以插入，但不能删除。谢谢您的回答。我想问的是如何创建容器加宽的平滑过渡（从而加宽旧输入）+无论如何，因为我真的很感激你的努力！谢谢