Framer Motion: flexbox with justify-content: space-around or gap causes layout animation to break

I am trying to achieve a smooth transition in a flexbox when an element is removed.

It seems that when a flexbox uses gap or justify-content property, the space around the removed element disappears instantly. This causes the other elements in the flexbox to move instantly to their new position without any animation, even though they have layout property applied.

Expected Behavior:

The remaining elements should smoothly transition to their new positions when an element is removed.

Here's the code demonstrating the issue:Sandbox (you can click on the red field to show/hide the middle element)

import React, { useState } from "react";import { motion, AnimatePresence } from "framer-motion";export default function App() {  const [show, setShow] = useState(true);  return (<motion.div id="container" onClick={() => setShow((prev) => !prev)} layout><motion.div className="box" key="test1" layout>        element 1</motion.div><AnimatePresence>        {show && (<motion.div className="box" exit={{ width: 0 }} key="test2">            element 2</motion.div>        )}</AnimatePresence><motion.div className="box" key="test3" layout>        element 3</motion.div></motion.div>  );}

#container {  background: red;  width: 500px;  height: 300px;  display: flex;  /* justify-content: space-around; */  gap: 100px;}.box {  background: blue;  height: 50px;  width: 50px;  overflow: hidden;}

How can I achieve smooth transitions for the remaining elements in this scenario?

React Version: 18.3.1

Framer Motion Version: 11.11.7