div not shrinking the same way with the 1st div in a column-CodePudding

So I created 2 divs. The 1st one has an image inside it and the 2nd one is a container with background-image and text inside. I set them to a certain size when resizing the screen to 875px width. The problem is when I resize the window to the smallest size, the 2nd div doesn't match the shrink with the 1st div. Here's the code for CSS and HTML.

.main_left_container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1175px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  position: relative;
}

.image_container {
  flex-basis: 65%;
  flex-shrink: 0;
  flex-grow: 0;
  width: 65%;
  min-width: 65%;
}

.overlap_img {
  background-image: url("https://i.imgur.com/g00dAUi.jpeg");
  background-size: cover;
  flex-basis: 30%;
  flex-shrink: 0;
  flex-grow: 0;
  width: 30%;
  min-width: 30%;
  height: 100%;
  position: relative;
  left: -100px;
  bottom: -60px;
  height: 150px;
  padding: 45px 75px 75px 50px;
  color: #fff;
}

.overlap_img h3 {
  margin-top: 0;
  font-size: 30px;
}

.overlap_img p {
  margin-top: 0;
  font-size: 18px;
}

@media (max-width: 1250px) {
  .main_container {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
  }
  .image_container img {
    width: 95%;
  }
  .overlap_img {
    flex-basis: 25%;
    width: 25%;
    min-width: 0;
    position: relative;
    bottom: -75px;
    height: 250px;
  }
}

@media (max-width: 1000px) {
  .main_container {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
  }
  .main_left_container {
    display: block;
    width: 100%;
  }
  .image_container {
    width: 100%;
  }
  .image_container img {
    width: 100%;
  }
  .overlap_img {
    flex-basis: 84.70%;
    width: 84.70%;
    position: relative;
    left: 50px;
    bottom: 85px;
    height: 135px;
  }
}

@media (max-width: 950px) {
  .overlap_img {
    display: block;
    position: relative;
    left: 0;
    bottom: 4px;
  }
}

@media (max-width: 875px) {
  .flex {
    flex-direction: column;
  }
  .main_left_container {
    max-width: 575px;
  }
  .overlap_img {
    width: 78.27%;
    padding-bottom: 85px;
  }
}

<div >
  <div >
    <a href="#services">
      <picture>
        <img src="https://i.imgur.com/Fi7IsGd.jpeg" alt="dcbel-uBKg9f0aUrY-unsplash.jpg">
      </picture>
    </a>
  </div>
  <div >
    <h3 >Fast Charging Car</h3>
    <p >
      Probably the coolest thing evar!!1 We can program this for you.
    </p>
    <a href="/services/programming/"  style="padding-left: 3rem; padding-right: 3rem;">
            MORE DETAILS
          </a>
  </div>
</div>

CodePudding user response：

Use the Flexbox and its states so you can easily solve your problem using the below code to fulfill your requirement.

.main_left_container {
        margin-left: auto;
        margin-right: auto;
        max-width: 1175px;
        display: flex;
        position: relative;
        padding: 20px;
    }

    .main_left_container>div {
        flex: 1;
    }

    .image_container img {
        width: 100%;
        height: 100%;
    }

    .overlap_img {
        background-image: url("https://dummyimage.com/640x360/ccc/aaa");
        background-size: cover;
        position: relative;
        color: #fff;
    }

    .overlap_img h3 {
        margin-top: 0;
        font-size: 30px;
    }

    .overlap_img p {
        margin-top: 0;
        font-size: 18px;
    }

    @media (max-width: 1250px) {
        .main_container {
            max-width: 950px;
            margin-left: auto;
            margin-right: auto;
        }
        .overlap_img {
            min-width: 0;
            position: relative;
        }
    }

    @media (max-width: 1000px) {
        .main_container {
            max-width: 850px;
            margin-left: auto;
            margin-right: auto;
        }
        .main_left_container {
            display: block;
            width: 100%;
        }

        .image_container {
            width: 100%;
        }

        .image_container img {
            width: 100%;
        }

        .overlap_img {
            position: relative;
            height: 200px;
            padding: 45px 75px;
        }
    }

    @media (max-width: 875px) {
        .flex {
            flex-direction: column;
        }

        .main_left_container {
            max-width: 100%;
        }
    }

    @media (max-width: 767px) {
        .overlap_img {
            padding: 40px 20px;
        }
    }

    @media (max-width: 480px) {
        .overlap_img {
            padding: 20px;
        }

        .overlap_img h3 {
            font-size: 28px;
        }

        .image_container img {
            min-height: 300px;
        }
    }

<div >
        <div >
            <a href="#services">
                <picture>
                    <img src="https://dummyimage.com/640x360/eee/aaa" alt="dcbel-uBKg9f0aUrY-unsplash.jpg">
                </picture>
            </a>
        </div>
        <div >
            <h3 >Fast Charging Car</h3>
            <p >
                Probably the coolest thing evar!!1 We can program this for you.
            </p>
            <a href="/services/programming/"  style="padding-left: 3rem; padding-right: 3rem;">
                MORE DETAILS
            </a>
        </div>
    </div>