Divs Not Equal Height when using Flexbox

SGriffinKatzcy — Fri, 26 Feb 2021 16:42:56 GMT

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!***

Re: Divs Not Equal Height when using Flexbox

Anton — Sun, 28 Feb 2021 15:03:47 GMT

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

topic Re: Divs Not Equal Height when using Flexbox in CMS Development

Divs Not Equal Height when using Flexbox

Re: Divs Not Equal Height when using Flexbox