Viewport-relative Units (vw/vh) Don't Contribute to Containing Block Sizing

• Component: Layout and Rendering
• Status: RESOLVED WORKSFORME

[Jon Lee]

Created attachment 203021 [details]
Test case

If an element is sized using the relative units vw or vh, it does not appear to contribute to the content width of its containing block.

See the attached reproduction for an example: in a div containing a red "spacer" block sized with width: 5vw, and a string of text, the text overflows the div because the width of the spacer is not taken into account when computing the box size. The second test case shows the same example but using px instead of vw, and the box sizing behaves as expected.

STEPS TO REPRODUCE
1. Open the attached test case.
2. Also of note: watch the behavior (or lack thereof) of the red box when the browser window is resized.

Two unexpected things happen: the text overflows the box, even though it and all of its contents are display: inline-block; and, the red box does not resize when the viewport size changes without a refresh.

As shown in the third test case (and the first, to some degree), it appears that viewport-relative-sized blocks do contribute to the content *height* of an element, it's just the width that does not get resized.

<rdar://problem/13967661>

[zalan]

Works fine with r198472