▼
Streaming live at 10am (PST)

Flexbox behavior different because of collection list

Design help General
,
#1

Hello community!

I want to make my blog posts scale their height according to their longest sibling. I can easily get this to work using flexbox and setting margin: auto; to the read more button. However, when hooking up the content to the CMS using a collection list it does not work anymore.

I’ve build the same layout twice, using the exact same classes and structure. The difference is that one of them uses dynamic content from a collection list. One works fine, the other does not.

In my read-only link the top of the page uses a collection list, the bottom is static content.

Why is this happening and is there a known solution?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
#2

@Geffrey_Barendregt Setting a 100% height at Newsblock-wrapper will solve this issue. The difference is that on the sample without CMS there is no element between your grid (which has the child stretch property).

#3

@dennyhartanto Thank you so much! Worked like a charm. If you don’t mind, could you explain a bit more what the difference is? You said there is no element between my grid in the no-cms example? Between my grid and what? And why does defining a height solve the issue?

Would appreciate it allot if you could help me understand what caused this issue :slight_smile:

Thanks again!!

#4

If you check back at the Collection structure it looks like this:
List Wrap -> List (Grid Layout) -> List Item -> Newsblock-wrapper.

compared to the static sample:
List (Grid Layout) -> Newsblock-wrapper.

If you look at the Grid Layout selected, beside Align the vertical Align items: stretch is selected, which means any Child element directly under the grid element will be stretched vertically to fill each Grid Cell. Hence your Newsblock-wrapper does not need the 100% Height on the sample.

Meanwhile on the Collection sample. The List-item was stretched to fill vertically, but the internal Newsblock-wrapper wasn’t so it’s height is just based on it’s contents. Setting 100% fills the newsblock-wrapper to the stretched list-item