屏幕缩放时worked-dash div超出父容器的问题求助

安全阿岳

2026-8-6

解决响应式布局中worked-dash容器溢出父元素的问题

检查盒模型设置：
确认worked-dash是否设置了box-sizing: border-box;，如果没加，元素的padding、border会额外占用宽度，直接导致超出父容器。给它加上：
```
.worked-dash {
  box-sizing: border-box;
  width: 100%;
}
```
正常的about-dash大概率已经默认继承或显式设置了这个属性，这是两者的核心差异点之一。
排查固定宽度/最小宽度约束：
检查worked-dash内部有没有设置固定宽度的子元素，或者自身加了min-width属性。如果子元素宽度超过小屏幕下父容器的尺寸，会直接把父元素撑爆。比如内部有个width: 400px的div，在420px以下的屏幕就会溢出，改成如下限制即可：
```
.worked-dash .child-element {
  max-width: 100%;
  width: 100%;
}
```
父容器的布局约束检查：
确认worked-dash的父元素是否是flex容器但没设置flex-wrap: wrap，或者子元素没开启flex-shrink。如果是flex布局场景，调整如下：
```
.worked-dash-parent {
  display: flex;
  flex-wrap: wrap;
}
.worked-dash {
  flex-shrink: 1;
  width: 100%;
}
```
媒体查询优先级验证：
用浏览器开发者工具（F12）查看worked-dash的计算样式，确认针对小屏幕的媒体查询规则是否被正确应用——有没有被更高优先级的样式（比如ID选择器、行内样式）覆盖，导致宽度设置不生效。