Shrink to viewport

shrink.md

I am looking to replicate the puppeteer fullPage feature. This shrinks an element into the page viewport before taking a screenshot. This is what I want: My element to be forced to fit into the viewport. I looked at the fullPage source code but couldn't tell what it was doing exactly. Maybe it's using JS and not CSS? I don't expect anyone will know this.

I tried applying every variation of height restrictions to body and then adding max-height,height or min-height to the div, but it doesn't obey height with any of these. I've tried adding height restrictions to all the children but even then nothing happens.

Here is what happpens with puppeteer when I set the viewport to 600x600. It returns an element (screenshot to be exact) which is 300x536. Before taking the shot, the whole card is compressed down and is viewable. This what I want in the browser in html:

Trying to do this myself I get this.

Setting some height didn't work body style="max-height:100vh". I needed to set these on card, not on the parent i.e. body.

width:300px;
height:600px

The best overall result I could achieve was to assign manually heights to inner divs, and shrink the size of overflowing text

.right-column: { //top box
   height: 50%
}
.left-column: {  //bottom box
   height: 50%
}
.stats {
   font-size:0.8em
}

In a non-Moz browser it looks like this, with the top and bottom overlapping

The puppeteer way is better so that is why I'm trying to get that work.

Here is a demo with the card.

Apologies to any F1 fans reading this. These are out-of-date stats.