Bug 191461

Summary: [css-flex][css-grid] Percentage sizes on elements inside the subitems should take into account the item's scrollbar size
Product: WebKit Reporter: Javier Fernandez <jfernandez>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, jfernandez, rego, simon.fraser, svillar, zalan
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.chromium.org/p/chromium/issues/detail?id=836827
Bug Depends on: 217479    
Bug Blocks:    
Attachments:
Description Flags
Test case to reproduce the flexibe box issue
none
Test case to reproduce the grid box issue none

Description Javier Fernandez 2018-11-09 03:49:28 PST
Created attachment 354323 [details]
Test case to reproduce the flexibe box issue

Check the attached examples, the issue is more noticeable in Grid Layout but it also happens on Flexbox.

The problem is that the items have a child with 100% width and height.
The items also have margin, padding, border and scrollbar.
The scrollbar size is ignored so the items end up being bigger than expected,
causing overflow (so you can actually scroll) when it was supposed to not happen.
Comment 1 Javier Fernandez 2018-11-09 03:49:54 PST
Created attachment 354324 [details]
Test case to reproduce the grid box issue