Altair chart inside a (panel) Flexbox with "container" width

[bertcoerver]

Hello,

I'm trying to put some Altair charts inside a flexbox, having the width of the charts adjust to the available space. I'm using Panel to set up the flexbox, like this:

import panel as pn
import altair as alt
pn.extension("vega")

chart = alt.Chart().mark_line().encode().properties(
#    width = "container",
)

flex_item = {
    "min_width": 200,
    "styles": {
                    'flex-grow': '1',
                    "background-color": "yellow",
                    "margin": "1px"
                    }
}

flex_item_content = {
    "styles": {"background-color": "green", "width": "90%"}
}

flex_items = [pn.Row(pn.pane.Vega(chart, **flex_item_content), **flex_item) for x in range(6)]

kwargs=dict(
    flex_wrap='wrap',
    flex_direction = "row",
    styles={
        'width': '80%', 
        "background-color": "white"
        },
    height = 300,
    )

fb = pn.FlexBox(*flex_items, **kwargs)

fb

Which gives me flex-items that always fill up the available space on the row and never get smaller than 200px. For example (the white boxes are the Altair charts):

When the viewport is small, every item is on a single row:

As the viewport gets larger multiple items are places on a row:

And even wider:

Now I want the charts to adapt their size to its parent (i.e. the green box). But as soon as I turn on width = "container" on the chart, the flexbox behaviour breaks: the flex-items still fill up the width of the viewport, but they never get grouped together on a row anymore (there is always only 1 item per row).

Any ideas on how to fix this?

Regards,
Bert