border-box with max-width and percent padding results in incorrect positioning after window resize

• Component: CSS
• Status: REOPENED ---

[Jay]

1. Set -webkit-box-sizing: border-box on all elements.
2. Create a div inside another div.
3. Give the outer div a max-width in pixels and a horizontal padding in percent.
4. Resize the browser window. The size of the inner div will change. With enough resizing, the inner div can be made to grow outside of the bounds of the outer div. This is most easily seen if you put a border on each div.

Here's a Stack Overflow thread about the issue with links to jsfiddles:

http://stackoverflow.com/questions/18139760/border-box-padding-max-width-jumping-elements

http://jsfiddle.net/Fw4dg/2/embedded/result/

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.

[Jay]

Created attachment 460905 [details]
An animated GIF demonstrating the issue

An animated GIF demonstrating the issue

[Jay]

This is still present in Safari Version 15.5 (17613.2.7.1.8) on Monterey. I've attached a GIF demonstrating the issue.