Search code examples
htmlcsscss-grid

Css grid content doesn't fit cell vertically

So i'm having some trouble with my layout using Css Grid. Here is a CodePen of my current layout :

https://codepen.io/jbeaudoin11/pen/zMOGGd

My goal is to have glitch-card with a dynamic height/width and fit the content cell. It works like a charm horizontally, the scrollbar shows up in the card container. But i'm not able to make it work vertically.

In my CodePen you can see the cyan border which represent where it should fit (should stop at the bottom of the window), but it doesn't and make content overflow the window.

Solution

  • I belive adding this lines to your glitch-card css does the trick

    display: inline-grid;
overflow: hidden;

    Check the CodePen: https://codepen.io/remigioamc/pen/xQKZWq