页面缩放200%+时按钮溢出父div的问题求助

问题根源 #

按钮用绝对定位脱离了父容器的flex布局流，同时左右padding采用百分比（8.6%），页面缩放时百分比计算基准易出现偏差；再加上父容器仅设置height:80%却无明确高度参考，最终导致按钮溢出。设置overflow:auto无效是因为绝对定位元素不受父容器overflow约束。

修复方案 #

方案1：移除绝对定位，利用flex布局自然居中 #

父容器已配置flex-direction:column的flex布局，直接去掉按钮的绝对定位属性，依靠父容器的align-items:center实现居中，同时替换百分比padding为更稳定的单位：

.login_div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 80%;
    max-width: 800px;
    height: 80%;
    /* 添加上下内边距，避免按钮贴边 */
    padding: 20px 0;
    box-sizing: border-box;
    background-color: white;
    border-radius: 6px;
    border: 2px solid #999999;
}

#ValidateLogin {
    background-color: #4B0082;
    color: white;
    border: none;
    /* 替换百分比padding为固定值 */
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /* 移除绝对定位相关属性 */
    /* position: absolute; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    text-wrap: wrap;
    /* 限制按钮最大宽度，避免超出父容器 */
    max-width: 90%;
}

方案2：保留绝对定位但约束按钮范围 #

如果必须保留绝对定位，调整定位方式并限制按钮宽度：

#ValidateLogin {
    background-color: #4B0082;
    color: white;
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: absolute;
    /* 用左右定位替代translateX，确保按钮在父容器内 */
    left: 5%;
    right: 5%;
    transform: none;
    text-wrap: wrap;
    max-width: 90%;
    box-sizing: border-box;
}

额外优化点 #

• 给html和body设置高度基准，让父容器的height:80%生效：

html, body {
    height: 100%;
    margin: 0;
}

• 避免用百分比设置按钮左右内边距，缩放时易出现宽度计算误差，优先用固定px值或rem/em这类相对单位。

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