Hi

I am only a few days into my use of altair, so please be patient..

I am trying to embed an altair graph into my web page

the page is designed so that the container that hosts the graph essentially (*) uses all the space - in width and height - in the page

and I then embed the altair graph using
alt.Chart(....).<snip>.properties(height='container', width='container')

my issue is that I get different results, depending on the way I achieve the premise above (*)
and to illustrate it I have create 2 codepens

• one that works fine
  https://codepen.io/parmentelat/pen/OJKXvjp
  the height of the vega container (the one passed to vegaEmbed) is set as '95vh' so it takes a fixed percentage of the viewport

• another that fails
  https://codepen.io/parmentelat/pen/JjgKpdM
  here the layout is little more complex
  essentially I want to use all the vertical space except for some preliminary text on top of the graph
  and to implement this layout I try to use a flexbox in the column direction, with the second item having flex-grow: 1

  with this layout, the initial position works fine, but as soon as one changes the browser window size, then the issue happens:
  the graph container height keeps on increasing, regardless of the size change direction

it seems it all comes down to the way the flex container computes its children spaces as explained here
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis
but I have not been able to find the right settings to get this to work properly

so I figures I would create this issue to at least document the problem, and ideally receive hints as how I can go about solving this