Auto sizing a single axis not properly handled

Describe your context

Plotly 5.11.0
Dash 2.7.0
Python 3.10

Dockerfile:

FROM debian:bullseye
RUN apt update && apt install -y --no-install-recommends python3 python3-pip
RUN pip install plotly==5.11.0 dash==2.7.0 dash-bootstrap-components==1.2.1 pandas==1.5.2
COPY swap_charts.py /tmp
EXPOSE 8050
CMD python3 /tmp/swap_charts.py

Describe the bug

My application is a simple report editor which is a column of charts and markdown where each chart or markdown can be selected and moved up or down in the column. To move charts up and down I have a callback which swaps adjacent children in the containing element.

When both the width and height of a chart are set to explicit sizes or when they are both None the swap works fine. When the height is set and width is None (so that width is auto sized), the swap results in swapped charts but sizes remain as they were.

The following is the mwe for the problem:

import json
from random import randint

import dash
from dash import Dash, dcc, html, Output, Input, State
import plotly.express as px


@dash.callback(
    Output("chart-container", "children"),
    Input("swap-button", "n_clicks"),
    State("chart-container", "children"),
    prevent_initial_call=True,
)
def update_chart(unused, charts):
    """Swap pairs of charts"""
    charts[0], charts[1] = charts[1], charts[0]
    charts[2], charts[3] = charts[3], charts[2]
    return charts


def layout():
    """Create 2 charts with height and 2 charts with width and height"""
    graphs = []
    for i in range(4):
        fig = px.bar(
            x=list(range(5)),
            y=[randint(1, 10) for _ in range(5)],
            title=f"Chart {i}"
        )
        width = 400 if i > 1 else None
        fig.update_layout(height=200*(i%2 + 1), width=width)
        graphs.append(dcc.Graph(figure=fig))

    chart = html.Div(children=graphs, id="chart-container")
    button = html.Button("Swap", id="swap-button")
    layout = html.Div([chart, button])

    return layout


if __name__ == "__main__":
    app = Dash()
    app.layout = layout()
    app.run_server(host="0.0.0.0", debug=True)

The following image shows the original order and sizes of the charts. Charts 0 and 2 have a height of 200px while charts 1 and 3 have a height of 400px. Charts 0 and 1 have a width of None while charts 2 and 3 have a width of 400px.

Swapping charts 0 and 1 and charts 2 and 3 results in correct sizes for charts 2 and 3 but the wrong sizes for charts 1 and 0. Although charts 1 and 0 are swapped, their sizes are not.

Expected behavior

When swapping child elements containing plotly charts the proper sizes should be retained.

Start by running the supplied minimal example with Plotly 5.11.0, Dash 2.7.0, and Python 3.10, then reproduce the swap of charts with an auto-sized width. Trace the chart update and sizing behavior after the callback; done means charts retain their own height and width after being reordered.