Divs Not Equal Height when using Flexbox

Develop, Build & Integrate CMS Development
1

In the Resources section of https://cylera-7852770.hs-sites.com/ I’m trying to force the slides to be an equal height, but applying these isn’t having an effect:

#hs_cos_wrapper_module_16127959672862 .slick-track {
 display: flex;
}

#hs_cos_wrapper_module_16127959672862 .slick-slide {
 flex: 1;
}

I wasn’t sure if flex needed to be added to .Resources_single as well, so I tried adding this too (without any success):

#hs_cos_wrapper_module_16127959672862 .Resources_single {
 flex: inherit;
}

I’m not an expert at CSS, so I’m sure I must be making a basic error somewhere. Any help would be greatly appreciated!

***As a workaround, I currently have a fixed height being applied, but that’s not an ideal solution!***

2

Hi @SGriffinKatzcy,

first deactivate all of your custom CSS and then try following code:

.slick-track{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 align-content: stretch;
 align-items: stretch;
 }

.slick-track .Resources_single{
order: 0;
 flex: 0 1 auto;
 align-self: auto;
}

best,

Anton