视口缩小时color类div内容溢出无法换行 附HTML/CSS代码求修复

通用基础修复 #

先给.color容器补全基础适配属性，覆盖绝大多数常规溢出场景：

.color {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

分场景补全修复 #

场景1：内部包含图片/固定宽度块元素 #

给内部非文本元素加宽度限制，避免撑破父容器：

.color img,
.color .fixed-width-child {
  max-width: 100%;
  height: auto;
}

场景2：.color容器使用了Flex布局 #

Flex默认配置不换行，小视口下子元素会横向溢出，需要开启换行规则：

.color {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 1rem;
}

场景3：内部有超长无间隔内容（如长URL、无空格字符串） #

补全文本换行规则，避免无间隔内容撑宽容器：

.color {
  word-break: break-all;
  overflow-wrap: anywhere;
}

• Stack Overflow 不支持直接上传本地项目文件/压缩包，社区明确禁止发帖要求其他用户下载第三方代码
• 可直接在发帖编辑器中嵌入可运行代码片段：使用编辑器自带的代码沙箱功能，粘贴最小复现的HTML/CSS/JS代码即可，不需要上传本地文件
• 若需要说明界面异常，可直接上传本地截图：发帖时点击编辑器的图片上传按钮，选择本地截图即可自动嵌入，无需额外托管
• 禁止附带第三方网盘的本地文件链接，这类提问会被标记为低质量内容

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