Thanks and I’ve added your extra demos to the end now also.
One of the benefits of pushing browsers to the limit is that you often run into unexpected or buggy behaviour which you can then avoid in real sites
In example 14 of the demo the example appears to work in Chrome but if you resize the browser smaller then the box stays wide and overflows the screen. If you click refresh it pops back into place so Chrome seems to forget to keep track of calc. What’s even stranger is that if you start small and then go wide it all works ok.
Another bug that came to light in Example 14 is that IE (Including edge) do not obey calc when used with the text-indent property (although it should be fine). (I have seen other bugs in IE with calc such as not honouring 100% when used on a font-size).
These types of bugs don’t often show in normal use so demos like these can prove very useful in weeding out the buggy browsers:)