How to stretch the image vertically by using flex box properties without using height

Question

I want to stretch the image vertically based on the content by using flex properties without using height. If the content size is increases or decreases image should be stretch automatically. please, can anyone suggest me in the right direction? Thanks in advance... below is my code snippet

.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-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>

Answer 1

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>

Answer 2

Maybe this is something you need?

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

.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;
  width: 100%;
  margin-bottom: 60px;
  border-radius: 10px;
}
.at-crop-box-thumb {
  flex-basis: 40%;
  overflow: hidden;
}
figure {
  display: flex;
  height: 100%;
  margin: 0;
  /* padding: 10px;
  padding-right: 0;
  margin-right: 10px; */ /* Use margin and padding as you like */
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
}
.at-crop-img {
  width: auto;
  height: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}
.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;
}

A Working codepen: https://codepen.io/leo-melin/pen/xxbgNxK

Answer 3

You can give display block and give height 100% to your image;

.at-crop-img {
      max-width: 100%;
      height:100%;
      display:block;
}

.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-img {
      max-width: 100%;
      height:100%;
      display:block;
}
.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>

Answer 4

Are you looking to fit the image vertically like this?

Then provide

.figure {
  display: flex;
}

Since you have already provided stretch for items, the content should be display flex to get it reflected.

.figure {
  display: flex;
}
.wrapper {
  background-color: red;
  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-img {
      max-width: 100%;
      height: 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>