I’m prototyping a flexbox unit for a responsive site. I created elements that grow/shrink with certain min. and max width so they will wrap and follow the responsive grid.
I want the 3rd row and below to NOT be visible so I’ve set overflow hide. Currently 3rd row peaks at certain points because i’ve set a height to the flexbox div.
Now, how do I tell the flexbox main div to only show the first 2 rows and still remain vertically flexible since my elements inside shrink/expand as needed.
Note: I can’t use breakpoints to hide extra elements (on 3rd row) because the elements need to wrap more fluidly without waiting for certain breakpoints.
Any help? I know it might seem confusing, and perhaps there is a completely different solution.
I gave the Component_Thumbnail_Wrapper a fixed height of 284px (to match the width) and moved the margin inside to be padding. Then I gave the parent ThumbnailGrid_Container a fixed height that is double the child so 568px.
My idea would be that you could then use an interaction on the “Show More” button to take the 'ThumbnailGrid_Container` from 568px to Auto revealing all the hidden children.
Wow! @matthewpmunger!
That’s a great work around. The only unfortunate part is not being able to keep the padding between rows consistent. But, it’s a small compromise.
Thanks so much! Glad to have great minds helping out in this community.
Yep, I wasn’t sure if that was an acceptable compromise for you. You’ll just need to play with the heights of the flex parent and child classes in order to adjust the vertical spacing. Also be aware that long titles that wrap down to a second line might look odd since the heights are not auto.
