CSS3 issue while trying to set max-height: 100vh;

Question

I would like to ask a question to solve an issue that I am facing while trying to build a website. I will mention now that I am a beginner and my issue may have a simple answer which I cannot see at the moment.

I am having an HTML with 2 sections. The 2nd section contains 2 divs, one with an image and another with some text. I have the text and the image placed one next to the other with display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; and the vh of the whole section is min-height: 100vh; , but the div with the text is bigger than 100vh...

This is the picture with the issue. Please note that the picture is 100vh and the div with the text is slightly bigger.

https://github.com/StefanMartin92/Iulia-Martin-Photography-Website.git

I am trying the make the whole section 100vh, but the div with the text is making it go crazy if I change the window size/resolution. Please help!

/* ABOUT SECTION */

.about {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.about-text {
  flex: 2 1 40rem;
  justify-content: space-around;
  background: var(--background-color);
  color: white;
  padding: 3rem 6rem;
}
.about-text h3 {
  padding: 2rem 0rem;
  font-family: "Ruhl Medium";
  align-items: center;
}
.about-text h2 {
  font-family: "Vibes";
  padding: 2rem;
}
.about-image {
  flex: 1 1 40rem;
  max-height: 100vh;
  position: relative;
}
.about-image h5 {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  letter-spacing: 2rem;
}
.about-image img {
  width: 100%;
    height: 100%;
  object-fit: cover;      
}

HTML CODE

<section class="about">
  <div class="about-image">
    <h5>MINIMAL</h5>
    <img src="https://stefanmartin92.github.io/Iulia-Martin-Photography-Website/img/about-image.png" alt="portrait-picture">
  </div>
  <div class="about-text flex">
    <h2>Iulia Martin</h2>
    <div class="about-life">
      <h3>My Life</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis reprehenderit nobis distinctio vel, earum sapiente, ullam fugiat deleniti dicta magni quos nam aliquam modi. Cumque esse nihil illo dolore fugit.</p>
    </div>
    <div class="about-work">
      <h3>My Work</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis reprehenderit nobis distinctio vel, earum sapiente, ullam fugiat deleniti dicta magni quos nam aliquam modi. Cumque esse nihil illo dolore fugit.</p>
    </div>
    <div class="about-contact">
      <h3>Get in touch</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis reprehenderit nobis distinctio vel, earum sapiente, ullam fugiat deleniti dicta magni quos nam aliquam modi. Cumque esse nihil illo dolore fugit.</p>
    </div>
  </div>
</section>

Answer 1

min-height sets just that, the minimum height of an element. It can still be bigger if it needs to, and that it is bigger. I don't know what exactly you want for this, but if you want it to scroll you can use.

max-height: 100vh;
overflow: scroll