如何阻止flex布局的div缩放并避免与其他元素重叠？

要实现屏幕中央的描述div始终居中、缩放时不拉伸且不与其他元素重叠，你需要调整几个关键CSS属性，以下是具体修改和解释：

修改后的完整代码 #

* {
    margin: 0;
    padding: 0;
    --link-easing-time: 0.15s;
}
body {
    display: flex;
    flex-direction: column;
}

.overview {
    background-image: url(/Images/1.jpeg);
    background-size: cover;
    width: 100%;
    min-height: 25em; /* 替换固定height为min-height，允许内容超出时自动扩展 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
    padding: 1em; /* 给容器添加内边距，避免小屏幕下内部div贴边 */
    box-sizing: border-box; /* 让内边距不影响容器宽度计算 */
}
.overview div {
    flex: 0 1 50%; /* 基础宽度50%，不允许拉伸，允许收缩 */
    max-width: 900px; /* 限制最大宽度，避免大屏下div过宽 */
    min-width: 280px; /* 限制最小宽度，保证移动端可读性 */
    background-color: rgb(30,30,30);
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5em; /* 内部添加内边距，避免文本贴边框 */
    max-height: calc(100% - 2em); /* 限制高度不超出容器可用空间 */
    overflow-y: auto; /* 内容过长时显示垂直滚动条 */
    box-sizing: border-box;
}
.overview p {
    margin: 1em 0;
    color: rgba(255,255,255,0.9);
    text-align: center; /* 可选：让文本居中，视觉更协调 */
}
.overview a {
    margin: 1em 0;
}

<body>
    <div class="overview">
        <div>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, inventore sint, nam sunt nihil ipsam quia accusantium praesentium voluptates, fugiat dolorum rerum officia. Nisi aperiam cumque totam molestias earum commodi.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Error consectetur dolorem magnam nobis officiis minima facilis vel corrupti totam fugiat tempora alias libero accusamus illo animi delectus, ut nostrum consequatur.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit excepturi, modi repudiandae ad itaque adipisci ratione a sed, voluptatem, quas aliquam dolore commodi eos possimus dignissimos nobis rerum enim tenetur?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam inventore unde sequi laudantium sapiente, quisquam necessitatibus officia eum autem nihil exercitationem, magni corporis fuga nulla eligendi! Provident explicabo recusandae earum!
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis alias molestiae impedit dolores consectetur delectus voluptas saepe nam blanditiis dolorum. Inventore omnis dicta consequatur mollitia magnam! Cum corrupti aspernatur sapiente.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, laborum non. Fugit id inventore, sequi minima explicabo optio at ut, repellat ipsam quia nemo! Libero quidem eaque obcaecati tenetur dolor.
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi exercitationem sint necessitatibus perferendis tempore quisquam earum ipsa minima, obcaecati dolore. Ut, unde. Mollitia animi assumenda facilis quis dolores provident asperiores!
            </p>
            <a href="" class="hover-effect">
                Learn More
            </a>
        </div>
    </div>
</body>

关键修改说明 #

• min-height:25em 替代固定高度：保证区块至少有25em高度，当内部内容在小屏幕上超出时，容器会自动扩展，避免内容溢出重叠。
• flex:0 1 50% 控制内部div尺寸：设置基础宽度为50%，同时禁止拉伸（flex-grow:0）、允许收缩（flex-shrink:1），配合max-width和min-width限制极端尺寸，确保在各种屏幕下都保持合适宽度。
• max-height + overflow-y:auto：限制内部div的高度不超出容器可用空间，内容过长时显示滚动条，避免超出容器边界。
• 内外层的padding + box-sizing：避免文本贴边，同时保证容器宽度计算正确，不会因为内边距导致横向溢出。

内容的提问来源于stack exchange，提问作者ZombieKicker7