Hi everyone,
I have a grid in my Statistics section that is overflowing its parent container, and I can’t work out why its doing so, nor how to fix it and prevent it from overlapping into the next section.
Any help is appreciated! Read only link below.
Here is my site Read-Only: https://preview.webflow.com/preview/edwards-blank-site-143218?utm_medium=preview_link&utm_source=designer&utm_content=edwards-blank-site-143218&preview=7ea4f60bcabe539ebd89bdce358a19d3&mode=preview
Change the grid height to 100%. This means it will fill 100% of its parent 75vh.
I’ve done so, as well as changing the parent div’s height to 100% and although it has helped, the overflowing problem remains.
Hmm, it doesn’t show it overflowing for me. Which browser are you using?
I’m on Firefox (I know it’s not supported, but I’m stubborn), but I’ve just checked on Chrome and it shows up as no longer overflowing, so I’m going to treat it as solved and chalk it up to a browser-related bug. 
Hi @Edward_Powell , you have a fixed height on the Statistics class for an element that is bigger. This makes it overflow. Change the “77vh” to auto and add some padding bottom to create some space.
Fixed sizes usually causes these problems.
Hope this solves it.
@Carlos_Ruiz_Del_Vizo That was it!!! Thanks so much for the tip. Is it better to set a min height rather than a fixed height in these cases? Thanks again!!
@Edward_Powell In that specific case is better to leave the height to default. Sections are better to leave them only with padding in order for them to adapt to the content.
But, in case you need to implement height for variable content is better to use min-height. This will allow the content to increase the section size depending on the device. Remember you need to implement with mobile in your mind, that usually changes the height of everything.