I was on one of my rounds of social media trawling, just seeing what was floating through the aether, when I came across a toot by Andy P that said:
Fun #css trick:
width: calc(infinity * 1px);
height: calc(infinity * 1px);
…and I immediately thought, This is a perfect outer-limits probe! By which I mean, if I hand a browser values that are effectively infinite by way of the infinity keyword, it will necessarily end up clamping to something finite, thus revealing how far it’s able or willing to go for that property.
The first thing I did was exactly what Andy proposed, with a few extras to zero out box model extras:
div { width: calc(infinity * 1px); height: calc(infinity * 1px); margin: 0; padding: 0; }
Then I loaded the (fully valid HTML 5) test page in Firefox Nightly, Chrome stable, and Safari stable, all on macOS, and things pretty immediately got weird:
... continue reading