191461 2018-11-09 03:49:28 -0800 [css-flex][css-grid] Percentage sizes on elements inside the subitems should take into account the item's scrollbar size 2025-10-19 06:01:56 -0700 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Unspecified Unspecified NEW https://bugs.chromium.org/p/chromium/issues/detail?id=836827 P2 Normal --- 217479 1 jfernandez webkit-unassigned bfulgham chu jfernandez rego simon.fraser svillar zalan oldest_to_newest 1476845 0 354323 jfernandez 2018-11-09 03:49:28 -0800 Created attachment 354323 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. 1476846 1 354324 jfernandez 2018-11-09 03:49:54 -0800 Created attachment 354324 Test case to reproduce the grid box issue 2152409 2 chu 2025-10-19 00:30:30 -0700 I was not able to identify the issue with the attachment, but I found another piece of code that reproduces it possibly related to this. https://codesandbox.io/p/sandbox/ydlskv 2152423 3 chu 2025-10-19 06:01:56 -0700 Pull request: https://github.com/WebKit/WebKit/pull/52626 354323 2018-11-09 03:49:28 -0800 2018-11-09 03:49:28 -0800 Test case to reproduce the flexibe box issue flex.html text/html 1521 jfernandez PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KLmZsZXggewogIGRpc3BsYXk6IGlubGluZS1mbGV4Owog IGJvcmRlcjogc29saWQgNXB4IGJsYWNrOwogIHdpZHRoOiAxNTBweDsKICBoZWlnaHQ6IDEwMHB4 OwogIG1hcmdpbjogMTBweDsKICB2ZXJ0aWNhbC1hbGlnbjogdG9wOwp9CgouaXRlbSB7CiAgZmxl eDogMTsKICBvdmVyZmxvdzogc2Nyb2xsOwogIGJvcmRlcjogc29saWQgbWFnZW50YTsKICBib3Jk ZXItd2lkdGg6IDEycHggOXB4IDZweCAzcHg7CiAgbWFyZ2luOiAxcHggMnB4IDNweCA0cHg7CiAg cGFkZGluZzogNXB4IDE1cHggMTBweCAyMHB4OwogIGJhY2tncm91bmQ6IGN5YW47Cn0KCi5zdWJp dGVtIHsKICB3aWR0aDogMTAwJTsKICBoZWlnaHQ6IDEwMCU7CiAgYmFja2dyb3VuZDogeWVsbG93 OwogIGZvbnQ6IDIwcHgvMSBBaGVtOwp9CgouaG9yaXpvbnRhbFRCIHsKICB3cml0aW5nLW1vZGU6 IGhvcml6b250YWwtdGI7Cn0KCi52ZXJ0aWNhbExSIHsKICB3cml0aW5nLW1vZGU6IHZlcnRpY2Fs LWxyOwp9CgoudmVydGljYWxSTCB7CiAgd3JpdGluZy1tb2RlOiB2ZXJ0aWNhbC1ybDsKfQo8L3N0 eWxlPgoKPGRpdiBjbGFzcz0iZmxleCI+CiAgPGRpdiBjbGFzcz0iaXRlbSI+CiAgICA8ZGl2IGNs YXNzPSJzdWJpdGVtIj5YPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZmxleCI+ CiAgPGRpdiBjbGFzcz0iaXRlbSB2ZXJ0aWNhbExSIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0ZW0i Plg8L2Rpdj4KICA8L2Rpdj4KPC9kaXY+Cgo8ZGl2IGNsYXNzPSJmbGV4Ij4KICA8ZGl2IGNsYXNz PSJpdGVtIHZlcnRpY2FsUkwiPgogICAgPGRpdiBjbGFzcz0ic3ViaXRlbSI+WDwvZGl2PgogIDwv ZGl2Pgo8L2Rpdj4KCjxkaXYgY2xhc3M9ImZsZXgiPgogIDxkaXYgY2xhc3M9Iml0ZW0gdmVydGlj YWxMUiI+CiAgICA8ZGl2IGNsYXNzPSJzdWJpdGVtIj5YPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoK PGRpdiBjbGFzcz0iZmxleCI+CiAgPGRpdiBjbGFzcz0iaXRlbSB2ZXJ0aWNhbExSIj4KICAgIDxk aXYgY2xhc3M9InN1Yml0ZW0gaG9yaXpvbnRhbFRCIj5YPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoK PGRpdiBjbGFzcz0iZmxleCI+CiAgPGRpdiBjbGFzcz0iaXRlbSB2ZXJ0aWNhbExSIj4KICAgIDxk aXYgY2xhc3M9InN1Yml0ZW0gdmVydGljYWxSTCI+WDwvZGl2PgogIDwvZGl2Pgo8L2Rpdj4KCjxk aXYgY2xhc3M9ImZsZXgiPgogIDxkaXYgY2xhc3M9Iml0ZW0gdmVydGljYWxSTCI+CiAgICA8ZGl2 IGNsYXNzPSJzdWJpdGVtIj5YPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZmxl eCI+CiAgPGRpdiBjbGFzcz0iaXRlbSB2ZXJ0aWNhbFJMIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0 ZW0gaG9yaXpvbnRhbFRCIj5YPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZmxl eCI+CiAgPGRpdiBjbGFzcz0iaXRlbSB2ZXJ0aWNhbFJMIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0 ZW0gdmVydGljYWxMUiI+WDwvZGl2PgogIDwvZGl2Pgo8L2Rpdj4K 354324 2018-11-09 03:49:54 -0800 2018-11-09 03:49:54 -0800 Test case to reproduce the grid box issue grid.html text/html 1500 jfernandez PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KLmdyaWQgewogIGRpc3BsYXk6IGlubGluZS1ncmlkOwog IGJvcmRlcjogc29saWQgNXB4IGJsYWNrOwogIGdyaWQ6IDEwMHB4IC8gMTUwcHg7CiAgbWFyZ2lu OiAxMHB4OwogIHZlcnRpY2FsLWFsaWduOiB0b3A7Cn0KCi5pdGVtIHsKICBvdmVyZmxvdzogc2Ny b2xsOwogIGJvcmRlcjogc29saWQgbWFnZW50YTsKICBib3JkZXItd2lkdGg6IDEycHggOXB4IDZw eCAzcHg7CiAgbWFyZ2luOiAxcHggMnB4IDNweCA0cHg7CiAgcGFkZGluZzogNXB4IDE1cHggMTBw eCAyMHB4OwogIGJhY2tncm91bmQ6IGN5YW47Cn0KCi5zdWJpdGVtIHsKICB3aWR0aDogMTAwJTsK ICBoZWlnaHQ6IDEwMCU7CiAgYmFja2dyb3VuZDogeWVsbG93OwogIGZvbnQ6IDIwcHgvMSBBaGVt Owp9CgouaG9yaXpvbnRhbFRCIHsKICB3cml0aW5nLW1vZGU6IGhvcml6b250YWwtdGI7Cn0KCi52 ZXJ0aWNhbExSIHsKICB3cml0aW5nLW1vZGU6IHZlcnRpY2FsLWxyOwp9CgoudmVydGljYWxSTCB7 CiAgd3JpdGluZy1tb2RlOiB2ZXJ0aWNhbC1ybDsKfQo8L3N0eWxlPgoKPGRpdiBjbGFzcz0iZ3Jp ZCI+CiAgPGRpdiBjbGFzcz0iaXRlbSI+CiAgICA8ZGl2IGNsYXNzPSJzdWJpdGVtIj5YPC9kaXY+ CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZ3JpZCI+CiAgPGRpdiBjbGFzcz0iaXRlbSB2 ZXJ0aWNhbExSIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0ZW0iPlg8L2Rpdj4KICA8L2Rpdj4KPC9k aXY+Cgo8ZGl2IGNsYXNzPSJncmlkIj4KICA8ZGl2IGNsYXNzPSJpdGVtIHZlcnRpY2FsUkwiPgog ICAgPGRpdiBjbGFzcz0ic3ViaXRlbSI+WDwvZGl2PgogIDwvZGl2Pgo8L2Rpdj4KCjxkaXYgY2xh c3M9ImdyaWQiPgogIDxkaXYgY2xhc3M9Iml0ZW0gdmVydGljYWxMUiI+CiAgICA8ZGl2IGNsYXNz PSJzdWJpdGVtIj5YPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZ3JpZCI+CiAg PGRpdiBjbGFzcz0iaXRlbSB2ZXJ0aWNhbExSIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0ZW0gaG9y aXpvbnRhbFRCIj5YPC9kaXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZ3JpZCI+CiAg PGRpdiBjbGFzcz0iaXRlbSB2ZXJ0aWNhbExSIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0ZW0gdmVy dGljYWxSTCI+WDwvZGl2PgogIDwvZGl2Pgo8L2Rpdj4KCjxkaXYgY2xhc3M9ImdyaWQiPgogIDxk aXYgY2xhc3M9Iml0ZW0gdmVydGljYWxSTCI+CiAgICA8ZGl2IGNsYXNzPSJzdWJpdGVtIj5YPC9k aXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZ3JpZCI+CiAgPGRpdiBjbGFzcz0iaXRl bSB2ZXJ0aWNhbFJMIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0ZW0gaG9yaXpvbnRhbFRCIj5YPC9k aXY+CiAgPC9kaXY+CjwvZGl2PgoKPGRpdiBjbGFzcz0iZ3JpZCI+CiAgPGRpdiBjbGFzcz0iaXRl bSB2ZXJ0aWNhbFJMIj4KICAgIDxkaXYgY2xhc3M9InN1Yml0ZW0gdmVydGljYWxMUiI+WDwvZGl2 PgogIDwvZGl2Pgo8L2Rpdj4K