使用flex-shrink时元素无法收缩？响应式布局问题求助

我正在进行The Odin Project的着陆页项目开发，遇到如下问题：缩小浏览器窗口时，头部文本会被“图片”占位元素覆盖，窗口缩至最小后，布局变为杂乱的垂直堆叠状态。我已为hero和图片元素添加flex-shrink: 1，期望它们能收缩并维持原有布局，但实际元素堆叠在一起，图片还会移至左下角。

原CSS代码 #

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif ;
}

.header {
    display: flex;
    align-items: center;
    background: #1f2937;
    color: #F9FAF8;
    font-size: 24px;
    justify-content: center;
    padding-left: 230px;
    padding-right: 230px;
    padding-top: 10px;
    max-height: 40px;
    flex-shrink: 1;
}

.headersecondarytext {
    color: #E5E7EB;
    font-size: 18px;
    margin: 10px;
}

#headerlinkone {
    margin-left: auto;
}

a {
    color: white;
    text-decoration: none;
}

.hero {
    display: flex;
    background: #1f2937;
    color: #F9FAF8;
    padding: 50px 10px;
    flex-direction: column;
    overflow-wrap: break-word;
    padding-left: 230px;
    padding-right: 230px;
    padding-top: 100px;
    padding-bottom: 0px;
    flex-shrink: 1;
}


.herotext {
    max-width: 400px;
}

.heromaintext {
    font-size: 48px;
    font-weight: bolder;
    margin-bottom: 10px;
}

.herosecondarytext {
    color: #E5E7EB;
    font-size: 24px;
}

.photo {
    display: flex;
    background: gray;  
    padding: 50px;
    justify-content: center;
    align-items: center;
    min-width: 370px;
    min-height: 100px;
    align-self: flex-end;
    position: relative;
    top: -200px;
    flex-shrink: 1;
}

button {
    align-self: flex-start;
    background: #3882f6;
    padding: 7px 25px;
    color: #F9FAF8;
    font-weight: 600;
    border: 0;
    border-radius: 7px;
    margin-top: 15px;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="header">
        
        <h3>Header Logo</h3>
        <a href="#" id="headerlinkone"  class="headersecondarytext">Header Link one</a>
        <a href="#" class="headersecondarytext">Header Link two</a>
        <a href="#" class="headersecondarytext">Header Link three</a>
    </div>
    <div class="hero">
        <div class="herotext">
            <div class="heromaintext">This Website Is Awesome</div>
            <div class="herosubtext">This website has some subtext that goes here under the main title. It's a smaller font and the color is lower
            contrast</div></div>
            <div class="button"><button>Sign up</button></div>
            <div class="photo">This is a placeholder for an image</div>
        
    </div>
</body>

</html>

核心问题在于Hero区域Flex方向错误、相对定位导致布局脱离正常流，同时固定内边距和最小宽度限制了响应性，以下是针对性修复：

1. 修正Hero区域核心布局 #

• 将.hero的flex-direction: column改为row，实现文本与图片横向排列的预期布局
• 移除.photo的position: relative; top: -200px，相对定位会让元素脱离文档流，直接引发重叠与混乱
• 给.hero添加align-items: center实现内部元素垂直居中，同时设置gap: 40px控制文本与图片的间距

2. 优化响应性限制 #

• 将.header和.hero的固定左右内边距改为padding-inline: clamp(20px, 10%, 230px)，使用clamp()实现自适应内边距，小窗口时自动缩小，大窗口时保持最大230px
• 移除.photo的min-width: 370px，改用flex: 1让图片区域自适应收缩，同时设置min-width: 250px作为最小宽度下限，避免过度收缩

3. 调整Header高度限制 #

• 移除.header的max-height: 40px，固定高度会导致小窗口下头部文本被截断，改用padding-block: 10px控制上下内边距，让高度自适应内容

修改后的CSS代码 #

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif ;
}

.header {
    display: flex;
    align-items: center;
    background: #1f2937;
    color: #F9FAF8;
    font-size: 24px;
    justify-content: center;
    padding-inline: clamp(20px, 10%, 230px); /* 自适应内边距 */
    padding-block: 10px;
}

.headersecondarytext {
    color: #E5E7EB;
    font-size: 18px;
    margin: 10px;
}

#headerlinkone {
    margin-left: auto;
}

a {
    color: white;
    text-decoration: none;
}

.hero {
    display: flex;
    background: #1f2937;
    color: #F9FAF8;
    padding-inline: clamp(20px, 10%, 230px); /* 自适应内边距 */
    padding-block: 100px 50px;
    align-items: center; /* 垂直居中 */
    gap: 40px; /* 文本和图片间距 */
    flex-wrap: wrap; /* 小窗口自动换行 */
}

.herotext {
    flex: 1; /* 文本区域占剩余空间 */
    min-width: 300px; /* 最小宽度下限 */
}

.heromaintext {
    font-size: 48px;
    font-weight: bolder;
    margin-bottom: 10px;
}

.herosecondarytext {
    color: #E5E7EB;
    font-size: 24px;
}

.photo {
    display: flex;
    background: gray;  
    padding: 50px;
    justify-content: center;
    align-items: center;
    flex: 1; /* 自适应收缩 */
    min-width: 250px; /* 最小宽度下限 */
}

button {
    background: #3882f6;
    padding: 7px 25px;
    color: #F9FAF8;
    font-weight: 600;
    border: 0;
    border-radius: 7px;
    margin-top: 15px;
}

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="header">
        <h3>Header Logo</h3>
        <a href="#" id="headerlinkone" class="headersecondarytext">Header Link one</a>
        <a href="#" class="headersecondarytext">Header Link two</a>
        <a href="#" class="headersecondarytext">Header Link three</a>
    </div>
    <div class="hero">
        <div class="herotext">
            <div class="heromaintext">This Website Is Awesome</div>
            <div class="herosubtext">This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast</div>
        </div>
        <div class="button"><button>Sign up</button></div>
        <div class="photo">This is a placeholder for an image</div>
    </div>
</body>
</html>

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