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

Panel
,
1

Hello,

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
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:

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

1
1630×616 32.7 KB

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

2
21160×286 35.9 KB

And even wider:

3
31742×198 33.4 KB

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!

Bert