Setting overflow on child cuts off content and removes scroll behavior of nested grid
I have an (horizontal) overflow of hidden and some ellipses on some child inside a grid inside an other grid (or flex, doesn't matter), which squishes the content and thus removes the (vertical) scroll behavior of the inner grid. Removing the grid/flex from the outer container produces normal scroll, but then I can't distribute the height of the inner grids. Removing the overflow from the child also restores scroll behavior, but then I'm not responsive to long text and/or a narrow window. I've created a minimal reproduction here: https://play.vuejs.org/#eNrtV02P0zAQ/SuWTyA1LVC4hFAEqKDlwKJlJS65eO1p413HtmynyWrV/87kq23aqnwcUXKazJt582Ymspwn+sHa6aYAGtMkQG4VC7BIdaoJSYTcEK6Y9+9Sel0EcF+cFClFmOAzgK+0PoKPAm5MiVDiLdOLZWWBBxDJrHn9C+cMKUf+kX/kH/n/c/6B/c9H7c/bz+8HFS86/qy9kXPkHDlHzt9y7u3eSmaDO2biw6OqTUKmuwsmeWqzhfQY+RiTlYLqbeurzUhIh4emNDom3Kgi1x24xuSo54+cKX1MXq0cma9cH8EsumzLtm1vuQeFF1hz05c3G3ArZcoIFXjujFIdyZ1xAlxMXtqKeKMw704x/jDg3J3RJ83UIs/qbVtByQ4ssPBsPiGsCOZ5F5yzKspArrOAHbx5cdTDvt6CTHF3J2W50QF08OezYtx6iHgmlSD1Fk9mUMUkk0JAP+oykygZQznERJvSMdshAaoQ9XkxAaWk9bCri19Js3I6ocGjqJVcT++90fj70dRMKTe5lQrcta1X7FMa92pSyhSSfm18wRUw6f08A/5wxn/vq9qX0u8OPLgNpHSHBebWEFp4+eMbyj4AcyMKhdEXwBvA5Re1xjbsY6EFyj6Ia9Re5da4IPX61i8rXIHvm6qFNkNp4lOK/2CfLrS+lzufvu6GuaXbX2BikOQ=
The vue part is irelevant, it's just a nice rapid prototyping playground with everything included in the url 🙂
How can I work around this unexpected behavior?
2 Replies
Try swapping
overflow-x: hidden; with overflow-x: clip; on your .InnerGrid:last-child span.
That gets the scroll back on the parent container but I can't see any elpises so I might be missing something 🤔Thanks that seems to work for now, but who knows when this weird behavior comes to haunt me again. The ellipses are only there for explanation for what I need it. The example doesn't have long enough text to show that.