margin未更新div尺寸致子元素溢出背景，天气APP布局求助

核心问题分析 #

你的问题根源在于：

1. 父容器设置了固定宽度540px且使用position: absolute，导致子元素的margin无法触发父容器宽度扩展，直接超出容器范围。
2. 用子元素margin-left控制间距的方式，在flex布局中容易引发溢出——因为margin是元素外部间距，不会被父容器的宽度计算包含。

方案一：自适应内容宽度（推荐） #

修改CSS，让父容器根据内容自动调整宽度，同时用flex原生的gap属性替代子元素margin控制间距：

.containerStats{
    display: flex;
    position: absolute;
    bottom: 22px;  
    left: 12px; /* 替换margin-left，布局更稳定 */
    width: fit-content; /* 宽度自动适配内容 */
    max-width: calc(100% - 24px); /* 限制最大宽度，避免超出屏幕 */
    padding: 10px;
    text-align: left;
    align-items: center;
    gap: 4vw; /* 用gap统一控制子元素间距 */
    backdrop-filter: blur(10px);
    border-radius: 10px; 
}

/* 移除以下两个子元素的margin-left */
/* #windSpeedKM{
    margin-left: 4vw;
}

#humidityPorcentage{
    margin-left: 4vw;
} */

改动说明： #

• width: fit-content让父容器自动包裹所有子元素（包含padding和gap），彻底解决溢出问题。
• gap是flex布局的标准间距方案，不会产生外边距合并，间距会被纳入父容器的宽度计算。
• max-width确保容器在大屏上不会过宽，小屏上自动收缩适配内容。

方案二：占满可用宽度并均匀分布元素 #

如果希望容器占满屏幕可用空间（保留边距），同时让子元素均匀分布，可改用justify-content: space-between：

.containerStats{
    display: flex;
    position: absolute;
    bottom: 22px;  
    left: 12px;
    right: 12px; /* 左右固定边距 */
    width: calc(100% - 24px); /* 宽度自适应屏幕 */
    padding: 10px;
    text-align: left;
    align-items: center;
    justify-content: space-between; /* 子元素自动分布在容器两端 */
    backdrop-filter: blur(10px);
    border-radius: 10px; 
}

/* 同样移除子元素的margin-left */

这种方案下，容器宽度会自动适配屏幕宽度，子元素不会溢出，同时保持合理的间距分布。

内容的提问来源于stack exchange，提问作者Valentín Sanabria