Why is flex not working for the following code

Question

/*About Section*/
.about {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.about-text {
  flex: 2 1 40rem;
  justify-content: space-around;
}
.about-image {
  flex: 1 1 40rem;
  
}

<section class="about">
        <div class="about-image">
          <h5>MINIMAL</h5>
          <img src="/img/about-image.png" alt="potrait" />
        </div>
        <div class="about-text">
          <h2>Elena Joy</h2>
          <div class="about-life">
            <h3>My Life</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime
              voluptate delectus ad deserunt aspernatur dignissimos distinctio
              itaque esse nisi accusamus!
            </p>
          </div>
          <div class="about-work">
            <h3>About Work</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime
              voluptate delectus ad deserunt aspernatur dignissimos distinctio
              itaque esse nisi accusamus!
            </p>
          </div>
          <div class="about-contact">
            <h3>Get in Touch</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime
              voluptate delectus ad deserunt aspernatur dignissimos distinctio
              itaque esse nisi accusamus!
            </p>
          </div>
        </div>
      </section>

So above is the HTML and CSS Snippet.And I want to give the text more space and image less so i tried using flex:2 1 40rem for the text part and flex:1 1 40rem for the image part.Pls help me out... Edit: Figured it out refer the following question Check this

`.about {display: flex; flex-wrap: wrap} .about-text {flex: 1}` should be enough for start, you don't need the rest. — VXp, Jul 01 '20 at 18:38
i tried using flex:2 and flex:1; but it doesnt work altho it works if i remove the image then the division goes fine and it becomes 2:1 — Anonymous 286, Jul 02 '20 at 10:01
Found the answer it is because when we apply flex it cannot shrink below content size since there are defaults for min height min width — Anonymous 286, Jul 02 '20 at 11:04

B Gammond · Accepted Answer · 2023-07-06T12:01:26.450

The first integer in the 'flex' property which you have set to allocate twice as much space to the 'about-text' div, will only be used once the div exceeds the 'flex-basis' which is the third integer. Therefore the issue is that your divs are never exceeding 40rem.

I think you can achieve the effect you are looking for by removing the flex-wrap from the flex container and removing the second and third integers in your flex property. In doing this the browser in all situations should apply two thirds of the space to the text and one third to the image

Your finished code would look like this

.about {
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
}
.about-text {
  flex: 2;
}
.about-image {
  flex: 1;
}

<section class="about">
  <div class="about-image">
    <h5>MINIMAL</h5>
    <img src="/img/about-image.png" alt="potrait" />
  </div>
  <div class="about-text">
    <h2>Elena Joy</h2>
    <div class="about-life">
      <h3>My Life</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime
        voluptate delectus ad deserunt aspernatur dignissimos distinctio
        itaque esse nisi accusamus!
      </p>
    </div>
    <div class="about-work">
      <h3>About Work</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime
        voluptate delectus ad deserunt aspernatur dignissimos distinctio
        itaque esse nisi accusamus!
      </p>
    </div>
    <div class="about-contact">
      <h3>Get in Touch</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime
        voluptate delectus ad deserunt aspernatur dignissimos distinctio
        itaque esse nisi accusamus!
      </p>
    </div>
  </div>
</section>

Why is flex not working for the following code

1 Answers1