Applying 'calc(infinity * 1px)' for width and height in CSS reveals how browsers handle unreasonable values. Firefox, Chrome, and Safari were tested using specific CSS rules. Chrome and Safari approach values around 33,554,431 pixels for width while Firefox computes a height of 19.2px, reflecting the height of a line of text. Assigning infinite height yields unexpected results, with Firefox defaulting to a much smaller computed height instead. The differences indicate varying approaches to handling vast numeric values in CSS.
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; }
Chrome and Safari both get very close to 2 25-1 (33,554,431), with Safari backing off from that by just 3 pixels, and Chrome by 31.
The computed height in Firefox is 19.2px, which is the height of a line of text at default font size and line height.
Despite assigning a height of infinite pixels, Firefox drops it to a computed height of 19.2px or 16px if line-height is set to 1.
Collection
[
|
...
]