Infinite Pixels
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 theinfinity 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; } <body> <div>I’m huge!</div> </body> Then I…
