Flexbox with "flex-grow" items and Vega/Altair Chart


I’m trying to make a pn.FlexBox that contains pn.pane.Vega items. I can set up the flexbox correctly like this:

import panel as pn
import altair as alt

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)]

    flex_direction = "row",
        'width': '80%', 
        "background-color": "white"
    height = 300,

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


Which gives me flex-items that always fill up the available space on the row and never get smaller than 200px. For example:

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:

So this all works fine. But now I want the charts (here the white boxes inside the green boxes), to adjust their width to the available space (i.e. the size of the green box). I do this by setting the width on the chart to "container" (as per documentation of Altair/Vega). But as soon as I do this, the flexbox behaviour brakes: the flex-items still fill up the row entirely, but they don’t get placed next to each other anymore…

Thanks a lot for any help!