Auto height of parent not resizing for collection list in a grid

I regularly run into this problem and I hope someone can help correct my logic. When creating a collection list grid the parent of the collection list doesn’t resize vertically to the dynamic content of that collection list. So I end up with content in a collection list that spills out of the parent container and overlaps the next parent container in my layout. The parent height is set to auto-height. I’ve tried using divs, containers, and sections as parents and they all do the same thing. Can someone point out where I’m going wrong. As always any help is greatly appreciated. Thanks

Share link

1 Like

Hi @freshlesh3 I presume that you are referencing to your section 11, overflow is caused with you fixed width set on collection grid to 1440px and your parent grid is set to max-width 1440px.

Parent grid and its children never overlap until you manually will do so.

Thanks for the reply @Stan But I’m actually talking about height not width. Collection lists fill up a content area dynamically so I assume the height of the parent would be dynamic as well, but if you look at the collection list in Collection Section not Section 11 it only expands for a portion of the content and the rest spills over and overlaps the footer 2 symbol.

hi @freshlesh3 by CSS rules height of element is given by its content and can be adjusted with top and bottom padding.

@Stan I get that, but the height of my parent object only fills the content area of maybe the first row of a Grid. Everything else overflows out of it.

https://www.loom.com/share/e6a707d1af654635bfa817a653362c98

1 Like

:star_struck: :star_struck::star_struck::star_struck: Thanks so much @Stan. I’ve been staring at this for hours and it was my simple mistake. Thanks for looking it over.

1 Like

feel free to close this request as solved

Hi Stan, the loom video is a 404, any chance you could explain the solution?

1 Like

hi @Hywel I’m sorry but I have canceled my Loom subscription as I am using now only CleanShot and all videos are gone. But if you have any issue still can look on your project to see if I can help. :wink:

No problem, thanks Stan
I am just trying to establish whether it’s possible to use auto heights in grids (CMS and static) so the cells expand to fit the text.
I should know the answer to this, but this was the only thread that seem to address the subject.

hi @Hywel sorry for late response as I wasn’t on comp.

Every cell expands to accommodate text if cell doesn’t have set fixed height. There are some exceptions but this is a basic behaviour, that’s why I don’t not understand what you mean as without exact example is hard to say anything.

Can you explain more closely what you are asking for or what you are facing. It will be also handy if you have some example.

1 Like

Hi, I am having the same issue! My CMS container height is set to auto-height, but it refuses to grow according to the number of items in the list. The list ends up overflowing into the later sections. I have dug around but this is the only thread I could find! Please help.

1 Like

Hi @Stan , I’m having the same issue of the CMS list overflowing the div block it is in and into subsequent content. It would be great if you could describe the steps to fix it again!

Thanks in advance.

Read only link here: Webflow - Building Identities

hi @neths13 on what page is your collection as endpoint you have provided is homepage.

EDIT: I have dig out video marked as solution from my HD

1 Like

Hi community!

I am having similar problem. Apologies I cannot share my site links as content s sensitive.

I have created a section > container > Div (inside div is an Div:Accordian title, and Div:Grid with cards), I have created a hide/show interaction on the Accordian title, to show/hide Div. It works fine, but the section is not growing vertically when content shows.

I have heights on all sections/dv etc. to auto, no vh’s or max px heights.Have played with box/flex settings, just can’t make the section grow :frowning:

SOLVED, solved my own problem :expressionless:

When I was “showing” the element in the interactions/animations panel, I was showing it to display as box, not flex…setting to flex allowed the section to grow with the animation

Thank you Stan, I was staring at this for half hour without seeing it and this was it :sweat_smile:

I’m having the same problem, but only when I have a single item on the last row of the list.

I have a 2-column grid for my CMS collection list of cards, and the height of the collection works fine, with the height set to the default “auto,” … as long as there is an even number of items on the list (2 per row)

But… any time I add a new blog post, thus adding one more—single—item to the next row… the height of the list container does not grow to fit the new height from the added—single—card, even though the height of the grid is still set to "auto.

So, I end up with a last card overflowing over the section below the grid.
Basically, Webflow’s CMS collection list seems to not see that the height of the list needs to change when there is a new item on the list, if it is a single item.
Changing the grid container to “Flex/vertical” instead o a grid solves the height problem… but then I lose my 2 columns

The only solve I have found is to add a minimum height to the collection list wrapper… which is obviously not a future-proof solve… since I’ll have to remember to change that height later. :sob:

You most probably have somewhere wrong setup. Feel free to create a new request following request quide rules