Stretch div dependence of content - html

Question

I want stretch box dependence of content, i'm using flexbox, but i can't to do. Below link my example
Parent div
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
Child div
order: 0;
flex: 0 1 auto;
align-self: auto;
.slick-track {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
}
.slick-slide {
width: 150px;
margin: 10px;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
.sliderItem {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
cursor: pointer;
}
.sliderItemTitle {
font-size: 25px;
font-weight: bold;
padding: 20px 20px 0;
min-height: 84px;
}
.sliderItemText {
display: flex;
padding-top: 10px;
padding: 0px 20px;
min-height: 58px;
align-items: center;
}
.sliderItemLinkBox {
margin-bottom: 20px;
padding: 0 20px;
}
.sliderItemLink {
color: yellow;
text-transform: uppercase;
}
<div class="slick-track">
<div class="slick-slide">
<div>
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 1</strong>
</div>
<div class="sliderItemText">
lorema dadad addadadad adadadadadasd
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div>
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 2</strong>
</div>
<div class="sliderItemText">
Lorem
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div>
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 3</strong>
</div>
<div class="sliderItemText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolore ipsa at minus molestias, neque rerum, aut minima voluptatum, dolorem odit nesciunt aliquid ullam officia reiciendis, recusandae natus maxime beatae.
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/7qvo2tmk/5/

Answer 1

This can be accomplished using JS to loop through the elements and adjust the height based on the tallest element.
Working Example
let slides = document.querySelectorAll('.sliderItem')
function updateHeights() {
let tallestSlide = 0
for (i = 0; i < slides.length; i++) {
if (slides[i].clientHeight > tallestSlide) {
tallestSlide = slides[i].clientHeight
}
}
for (i = 0; i < slides.length; i++) {
slides[i].style.height = tallestSlide + 'px'
}
}
window.onresize = updateHeights
updateHeights()

Answer 2

You can try doing this.
What I did is that I remove the div that encloses the .sliderItem
and then add height to the .sliderItem of height:100%. so that it will occupy the height of its parent div .slick-slide.
.slick-track {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
}
.slick-slide {
width: 150px;
margin: 10px;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
.sliderItem {
height: 100%;
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
cursor: pointer;
}
.sliderItemTitle {
font-size: 25px;
font-weight: bold;
padding: 20px 20px 0;
min-height: 84px;
}
.sliderItemText {
display: flex;
padding-top: 10px;
padding: 0px 20px;
min-height: 58px;
align-items: center;
}
.sliderItemLinkBox {
margin-bottom: 20px;
padding: 0 20px;
}
.sliderItemLink {
color: yellow;
text-transform: uppercase;
}
<div class="slick-track">
<div class="slick-slide">
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 1</strong>
</div>
<div class="sliderItemText">
lorema dadad addadadad adadadadadasd
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 2</strong>
</div>
<div class="sliderItemText">
Lorem
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 3</strong>
</div>
<div class="sliderItemText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolore ipsa at minus molestias, neque rerum, aut minima voluptatum, dolorem odit nesciunt aliquid ullam officia reiciendis, recusandae natus maxime beatae.
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
Hope this helps