Created attachment 466353 [details] Repro Children of grid element placed inside flex element have incorrect auto height calculated, causing said children, technically sitting on a grid, to overflow it. # Steps to reproduce * Open attached document in a decently sized window (higher than the gray container) * Observe how backgroundContainer takes vertical space where in reality should be 0px high * Observe how items with kittens "escape" the grid that is supposed to contain them * Play around: resize window in BOTH directions to see the items moving around # Test results Note: All tests conducted on macOS Ventura 13.3.1 (22E261) * Google Chrome 113.0.5672.92 - ✅ * Microsoft Edge 113.0.1774.42 - ✅ * Mozilla Firefox 113.0 - ✅ * Safari 16.4 (18615.1.26.11.23) - ❌ * Safari TP Release 168 (16.4, WebKit 18616.1.10.2) - ❌
I'm not sure if what I encountered is indeed just one bug, because there are two distinct ways to fix the bug (see repro source), so this leads me to believe that there might be in fact two bugs.
<rdar://problem/109351052>
Created attachment 466979 [details] Code reproduction with textarea I attached another reproduction of this bug. My reproduction shows a textarea escaping from the parent grid. In Safari, the textarea's height covers the entire screen. However, in Chrome and Firefox the textarea's height is around 30-40px. Adding "grid-auto-rows: 100%" to the element with "display: grid" seems to avoid the issue.