CSS问题：如何修复表单中flex布局导致的内容重叠问题？

我用HTML和CSS制作了一个登录表单，正常状态下显示正常，但拖动光标调整窗口高度时，表单内的内容出现重叠现象。已将body设置为flex布局，却不清楚该问题的产生原因。

状态说明 #

• 调整前：表单布局规整，标题、输入框、按钮依次排列，无重叠
• 调整后（从底部拖动缩小窗口高度）：表单内元素互相挤压、重叠

原代码 #

CSS代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}

.container {
    max-width: 1100px;
    height: 70%;
    width: 80%;
    background-color: #05C3DD;
    padding: 60px 30px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

.container .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.container .container .title {
    font-size: 25px;
    color: #05C3DD;
    font-weight: 500;
    position: relative;
    margin-left: 15px;
    margin-bottom: 28px;
}

.content form .login-details {
    margin: 20px 0 12px 0;
}

form .login-details .input-box {
    margin-bottom: 30px;
    margin-left: 15px;
    width: calc(100% / 2 - 20px);
}

form .input-box span .details {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.login-details .input-box input {
    height: 45px;
    width: 205%;
    outline: none;    
    font-size: 16px;   
    padding-left: 15px;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}

.login-details .input-box input:focus,
.login-details .input-box input:valid {
    border-color: #05C3DD;
}

.button {
    text-align: center;
}

form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}

form .button input:hover {
    /* transform: scale(0.99); */
    background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}

HTML代码

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <link rel="stylesheet" href="style2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="container">
        <div class="container">
        <div class="title">Login To Your Account</div>
        <div class="content">
            <form action="#">
                <div class="login-details">
                    <div class="input-box">
                        <span class="details"></span>
                        <input type="text" placeholder="Username" required>
                    </div>
                    <div class="input-box">
                        <span class="details"></span>
                        <input type="text" placeholder="Password" required>
                    </div>
                </div>
                <div class="button">
                    <input type="submit" value="Login">
                </div>
            </form>
        </div>
    </div>
    </div>
</body>

</html>

问题原因及修复方案 #

问题出在这几个关键设置上：

1. 固定高度限制：嵌套的.container都设置了height:70%和height:100%，当窗口高度缩小到不足以容纳表单内容时，容器不会自动扩展，内部元素就会重叠。
2. 输入框宽度异常：输入框设置了width:205%，直接超出容器范围，破坏布局结构。
3. 输入框宽度计算不合理：垂直排列的输入框用calc(100% / 2 - 20px)的宽度，导致可用空间不足。

修复后的CSS代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body{
    display: flex;
    min-height: 100vh; /* 用min-height代替height，允许body高度超过视口 */
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
    overflow: auto; /* 内容超出时显示滚动条 */
}

.container {
    max-width: 1100px;
    min-height: 500px; /* 给容器设置最小高度，避免过小 */
    width: 80%;
    background-color: #05C3DD;
    padding: 30px; /* 减少上下padding，避免占用过多高度 */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .container {
    max-width: 500px;
    min-height: 400px; /* 内部容器最小高度 */
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    padding: 20px; /* 增加内部padding，让元素有足够空间 */
}

.container .container .title {
    font-size: 25px;
    color: #05C3DD;
    font-weight: 500;
    margin-bottom: 28px;
}

.content form .login-details {
    margin: 20px 0 12px 0;
}

form .login-details .input-box {
    margin-bottom: 30px;
    width: 100%; /* 输入框宽度占满容器 */
}

form .input-box span.details { /* 修正选择器，原选择器是span .details，这里span的class是details */
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.login-details .input-box input {
    height: 45px;
    width: 100%; /* 输入框宽度占满父容器 */
    outline: none;    
    font-size: 16px;   
    padding-left: 15px;
    border: 1px solid #ccc;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}

.login-details .input-box input:focus,
.login-details .input-box input:valid {
    border-color: #05C3DD;
}

.button {
    text-align: center;
    margin-top: 20px;
}

form .button input {
height: 40px;
width: 100%; /* 按钮宽度占满 */
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: #05C3DD; /* 线性渐变没必要重复相同颜色，直接用纯色 */
}

form .button input:hover {
    background: #71b7e6;
}

额外优化点 #

• 修正了CSS选择器错误：原代码中form .input-box span .details应该是form .input-box span.details，因为span的class是details。
• 外层容器添加flex布局，确保内部表单容器始终居中。
• 把重复的线性渐变改成纯色，简化代码。
• 给按钮增加margin-top，避免和输入框过于贴近。

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