响应式Flexbox布局中元素收缩不一致问题的解决方案

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

/* 基础 Flexbox 容器设置 */
.main_left_container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1175px; /* 最大宽度限制 */
    display: flex; /* 启用 Flexbox */
    position: relative; /* 为内部绝对定位元素提供参考 */
    padding: 20px; /* 容器内边距 */
}

/* 关键：使所有直接子元素具有相同的弹性行为 */
.main_left_container > div {
    flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

/* 图像容器内的图像自适应 */
.image_container img {
    width: 100%; /* 图像宽度填充父容器 */
    height: 100%; /* 图像高度填充父容器 */
    object-fit: cover; /* 确保图像覆盖整个区域，可能裁剪 */
}

/* 重叠图像/文本容器 */
.overlap_img {
    background-image: url("https://dummyimage.com/640x360/ccc/aaa");
    background-size: cover;
    background-position: center; /* 居中背景图 */
    position: relative; /* 保持相对定位，但移除固定偏移 */
    color: #fff;
    /* 移除 flex-basis, width, min-width 等，让 flex: 1 接管 */
    padding: 45px 75px; /* 基础内边距 */
    display: flex; /* 内部内容也使用 Flexbox */
    flex-direction: column; /* 内部内容垂直堆叠 */
    justify-content: center; /* 垂直居中 */
    align-items: flex-start; /* 水平靠左 */
    text-align: left;
}

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

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

/* 媒体查询优化 */

/* 1250px 及以下 */
@media (max-width: 1250px) {
    .main_container { /* 注意：main_container 未在提供的HTML中使用，这里假设它是父级容器 */
        max-width: 950px;
        margin-left: auto;
        margin-right: auto;
    }
    .overlap_img {
        min-width: 0; /* 确保元素可以缩小到0 */
        /* 移除固定定位属性，让其自然布局 */
        position: relative;
        left: unset;
        bottom: unset;
    }
}

/* 1000px 及以下：从行布局切换到块级布局（堆叠） */
@media (max-width: 1000px) {
    .main_container {
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
    }
    .main_left_container {
        display: block; /* 切换为块级显示，子元素将垂直堆叠 */
        width: 100%; /* 确保容器宽度填充 */
        padding: 0; /* 移除容器内边距，根据需要调整 */
    }

    .image_container {
        width: 100%; /* 块级元素宽度填充 */
    }

    .image_container img {
        width: 100%;
        height: auto; /* 高度自适应，避免图片拉伸 */
    }

    .overlap_img {
        width: 100%; /* 块级元素宽度填充 */
        position: relative; /* 保持相对定位 */
        height: 200px; /* 固定高度，或根据内容调整 */
        padding: 45px 75px; /* 调整内边距 */
        margin-top: -80px; /* 向上重叠图像，实现视觉上的连接 */
        box-sizing: border-box; /* 确保 padding 不增加总宽度 */
    }
}

/* 875px 及以下 */
@media (max-width: 875px) {
    /* .flex 类未在提供的HTML中使用，此处忽略或根据实际情况调整 */
    /* .flex { flex-direction: column; } */

    .main_left_container {
        max-width: 100%; /* 容器最大宽度扩展到100% */
    }
    .overlap_img {
        padding: 30px 40px; /* 进一步调整内边距 */
        height: auto; /* 高度自适应内容 */
        margin-top: -60px; /* 调整重叠距离 */
    }
    .overlap_img h3 {
        font-size: 24px;
    }
    .overlap_img p {
        font-size: 16px;
    }
}

/* 767px 及以下 */
@media (max-width: 767px) {
    .overlap_img {
        padding: 20px 30px; /* 进一步缩小内边距 */
        margin-top: -40px;
    }
    .image_container img {
        min-height: 250px; /* 确保图片在小屏幕下有最小高度 */
    }
}

/* 480px 及以下 */
@media (max-width: 480px) {
    .overlap_img {
        padding: 15px 20px; /* 最小内边距 */
        margin-top: -30px;
    }
    .overlap_img h3 {
        font-size: 22px;
    }
    .image_container img {
        min-height: 200px;
    }
}