setting both width and height to 'container' within a flexbox or a grid

[parmentelat]

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

[parmentelat]

I made an attempt at achieving the same with a grid, using

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;

but it's not working any more convincingly, here is a live demo of that:

https://codepen.io/parmentelat/pen/KKOMoGx

[domoritz]

Is this an issue with Vega-Embed or CSS? Vega just uses the available container. There are a lot of interactions here between flex box, border box, view height etc that I don't think this can be isolated to be a Vega bug.

[parmentelat]

Hey @domoritz

thanks for your time looking into this

please note that I haven't implied this was a Vega bug, and am more looking for a way to achieve the simple goal that the codepens are trying to implement

this being said I understand your concern
in order to make things clearer, I have just tweaked this broken codepen
(again : https://codepen.io/parmentelat/pen/JjgKpdM)
so that data does not get loaded automatically at load time

so you can check by yourself that, until vega is triggered, the css settings work as expected and the blue container behaves properly

however as soon as vegaEmbed gets triggered (click anywhere in the top area), the blue container geometry starts to behave oddly

I admit this is not a formal evidence of a bug in vega - again I don't know if there's a bug - but this code clearly interferes with the geometry computation performed by the flexbox - and the grid too btw -
So I guess I am hoping that somebody acquainted with that code could think of a plausible explanation

[domoritz]

Yep, I agree there is some interaction. I tried your example without calling embed before and it didn't show the growing behavior.

Having said that, I won't have cycles to look into this but maybe someone else can take a deeper look.