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?
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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
