Allow .scale-to-fill to scale HTMLwidgets and iframes etc with container units instead of transform

[jimjam-slam]

@andrewpbray

Discussed in #161

Add this chunk of CSS to the your document (ideally outside the cr-section) or in an external stylesheet:

<style>

  .sticky-col-stack {
    container-name: sticks;
    container-type: size;
  }

  .sticky-col-stack .html-widget {
    width: 100cqw !important;
    height: 100cqh !important;
  }
</style>

This creates a container for our sticky content and forces all htmlwidgets (including those made by the {leaflet} and {plotly} R packages) to take up all the space available in the container. Based on my initial tests, this works quite well! I reckon it might be worth @andrewpbray and I discussing folding this functionality into .scale-to-fill so that it handles htmlwidgets gracefully, but we'll need to play with it more to make sure. You might also find edge cases where you need to provide a sizing policy to those widgets, but I think it'll be fine in most cases.

If you have figure captions (as you do in one case) and use this option, you might also want to dial the height down from 100cqh to something smaller, like (say) 95cqh. Play with this to test. If you want to size each figure individually, use #cr-plotly-map .html-widget instead of .sticky html-widget (which targets all the stickies at once).

---

In this discussion, I had some difficulty getting HTML widgets to scale consistently to take up the whole sticky stack without causing overflow. The solution I found used container query units.

We've experimented with those before for other things like poems, but it didn't work well. However, IIRC when I tried that before I didn't properly specify a container-type on the ancestor it needs to scale against (the sticky-col-stack).

I'm still not sure that this would work well for poems, but it might work well for iframes, embedded HTML widgets and the like. It would require some testing, though — figure captions are one case where you'd want to take care (maybe the figure as a whole gets the container query units, and then inside it you reserve space for the figure caption and let the figure itself take up the remainder?).