Bug 116850 - Viewport-relative Units (vw/vh) Don't Contribute to Containing Block Sizing
Summary: Viewport-relative Units (vw/vh) Don't Contribute to Containing Block Sizing
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.8
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2013-05-27 23:00 PDT by Jon Lee
Modified: 2016-03-19 15:09 PDT (History)
6 users (show)

See Also:


Attachments
Test case (2.45 KB, text/html)
2013-05-27 23:00 PDT, Jon Lee
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jon Lee 2013-05-27 23:00:14 PDT
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>
Comment 1 zalan 2016-03-19 15:09:22 PDT
Works fine with r198472