Скачать или смотреть CSS and Infinity

The "infinity" keyword in CSS is something new, and I wanted to see what it actually does. I was curious what purpose it could even serve, because if you make something, like a div, have infinite width or height, it sounds like your page would just go on forever and you would scroll forever. I tried setting a box in my browser to width: calc(infinity * 1px), and the result was that the box became massively wide.

Not really infinite, but something like 5.6 million pixels, which is huge. I did the same for height, margin, and padding, and each time, the element sort of exploded off the page or disappeared altogether, because the browser just can't display anything that large in any useful way. Trying font-size: calc(infinity) had similar results, the text would get super stretched out, sometimes showing a letter across the whole screen, but still not truly infinite.

Turns out, browsers have some real limits on how big these things can get. Chrome and Safari will cap font size at about a million pixels, Firefox caps it lower, and older browsers have smaller limits too. There is basically never a practical reason to use "infinity" in CSS because the values just max out at whatever the browser allows, and you just get a page that does not work right.

I could only think of one possible use, like maybe if you wanted to render a giant letter as a shape, but you could do that another way. Otherwise, it is just a fun trick to see what the engine will do, and now that we know, there is really not any real reason to use infinite sizes in web pages.