TL;DR; You have 2 options:
.at-crop-box-thumb img {
height: 100%;
}
or
.at-crop-box-thumb figure {
display: flex;
align-items: stretch; /* in this case without this it still works btw */
}
Long answer version:
I want to stretch the image vertically based on the content
Add height: 100% to the img
by using flex properties without using height
Why? height: 100% is super simple, it does exactly what you want
If the content size is increases or decreases image should be stretch automatically.
height: 100% does exactly that
can anyone suggest me in the right direction?
Use height: 100%. Here's the image as I inspect the DOM.
As you can see, the figure element content already fully vertical stretches with the align something: stretch you set. There's only the img element inside it is not stretched yet. You then have 2 options: simply set img{ height: 100%; }, or again make the figure a flex container, then align-items: stretch; to align its content (img), yet it's more complicated and doesn't make as semantical sense as height: 100%. I suggest using height: 100% despite you said you wanted a solution without using height.
Here's the code after add 1 line of code height: 100% in img. But it'll likely look terrible, because its width is relatively smaller than its height if the content on the right is too long, set an image's sizes based on dynamic text isn't a good idea. But as what you want is to stretch the image's height base on the content height, here's the code.
.wrapper {
background-color: red;
height: 100%;
width: 100%;
padding-top: 20px;
}
.section-inner {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.at-crop-box-content {
background: #ffffff;
flex-basis: 60%;
align-items: stretch;
display: flex;
flex-direction: column;
align-self: stretch;
}
.at-crop-box {
display: flex;
align-items: stretch;
width: 100%;
margin-bottom: 60px;
border-radius: 10px;
overflow: hidden;
}
.at-crop-box-thumb {
flex-basis: 40%;
display: flex;
align-items: stretch;
align-content: stretch;
}
.at-crop-box-thumb img {
height: 100%;
}
.at-crop-img {
max-width: 100%;
}
.at-crop-head {
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
line-height: 0.8;
color: #000000;
margin-bottom: 22px;
}
.at-crop-info {
font-family: sans-serif;
font-size: 24px;
line-height: 1.8;
color: #000000;
}
<div class="wrapper">
<div class="section-inner">
<div class="at-crop-box">
<div class="at-crop-box-thumb">
<figure><img class="at-crop-img" src="https://i.ibb.co/wCjFWjB/apple-2819015-340.jpg"></figure>
</div>
<div class="at-crop-box-content">
<h2 class="at-crop-head">Heading is here</h2>
<p class="at-crop-info">It is a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model.</p>
</div>
</div>
</div>
</div>
In the case you don't want to use height: 100%, here's the code using flex. Add
.at-crop-box-thumb figure {
display: flex;
align-items: stretch;
}
.wrapper {
background-color: red;
height: 100%;
width: 100%;
padding-top: 20px;
}
.section-inner {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.at-crop-box-content {
background: #ffffff;
flex-basis: 60%;
align-items: stretch;
display: flex;
flex-direction: column;
align-self: stretch;
}
.at-crop-box {
display: flex;
align-items: stretch;
width: 100%;
margin-bottom: 60px;
border-radius: 10px;
overflow: hidden;
}
.at-crop-box-thumb {
flex-basis: 40%;
display: flex;
align-items: stretch;
align-content: stretch;
}
.at-crop-box-thumb figure {
display: flex;
align-items: stretch;
}
.at-crop-img {
max-width: 100%;
}
.at-crop-head {
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
line-height: 0.8;
color: #000000;
margin-bottom: 22px;
}
.at-crop-info {
font-family: sans-serif;
font-size: 24px;
line-height: 1.8;
color: #000000;
}
<div class="wrapper">
<div class="section-inner">
<div class="at-crop-box">
<div class="at-crop-box-thumb">
<figure><img class="at-crop-img" src="https://i.ibb.co/wCjFWjB/apple-2819015-340.jpg"></figure>
</div>
<div class="at-crop-box-content">
<h2 class="at-crop-head">Heading is here</h2>
<p class="at-crop-info">It is a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model.</p>
</div>
</div>
</div>
</div>
