通过为颜色方块设置 flex: 0 0 150px 并确保父容器启用 overflow-x: auto，可强制所有方块水平排列且不撑宽父容器，超出部分触发横向滚动条，实现内容严格约束于 fieldset 可视区域内。
通过为颜色方块设置 `flex: 0 0 150px` 并确保父容器启用 `overflow-x: auto`，可强制所有方块水平排列且不撑宽父容器，超出部分触发横向滚动条，实现内容严格约束于 fieldset 可视区域内。
在响应式表单中，当需要展示一排固定尺寸的色块（如配色预览）时，常见陷阱是：.colors 容器使用 display: flex 后，默认 flex-wrap: nowrap 会使其子项强行横向铺开，导致整个 fieldset 被拉宽、破坏布局结构，甚至触发页面整体横向溢出——这不仅影响视觉一致性，更损害移动端体验。
根本原因在于：.colorBox 默认具有 flex: 1 1 auto（取决于浏览器默认值），即允许伸缩与收缩，而 width: 150px 在 Flex 容器中仅作为初始参考，并非强制约束。因此，必须显式禁用伸缩行为，并锚定基础尺寸。
✅ 正确解法如下：
.colorBox {
width: 150px;
height: 150px;
flex: 0 0 150px; /* 关键：不增长、不收缩、基准宽=150px */
flex-shrink: 0; /* 冗余但明确：禁止压缩（防某些旧浏览器兼容问题） */
}同时，确保父容器 .colors 具备滚动能力与尺寸约束：
.form fieldset {
border: none;
padding: .5rem;
/* 确保 fieldset 自身不因子元素撑大 —— 它已继承 .form 的 max-width */
}
.form .colors {
overflow-x: auto; /* 必须：启用横向滚动 */
overflow-y: hidden; /* 可选：隐藏纵向滚动干扰 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
padding: .25rem 0; /* 可选：提供滚动内边距，提升可用性 */
/* 防止 flex 容器因换行或对齐产生额外空间 */
white-space: nowrap; /* 辅助：防止 inline 行为干扰（若误用 display:inline-flex） */
}⚠️ 注意事项：
-
勿遗漏
flex-basis单位：flex: 0 0 150px中的150px不可省略单位（150无效），否则声明将被忽略； -
避免
min-width干扰：检查.colors或其祖先是否设置了min-width，它可能覆盖max-width限制； -
滚动条可见性优化：现代浏览器中可添加
scrollbar-width: thin（Firefox）或自定义::-webkit-scrollbar样式提升美观度； -
无障碍支持：横向滚动区域应添加
aria-label="Color palette, scroll horizontally to view all options"，便于屏幕阅读器识别。
最终效果：无论 .colors 内部包含 4 个还是 20 个 .colorBox，其容器宽度始终与 fieldset 一致；超出视口部分可通过鼠标拖拽、滚轮或触控滑动查看，布局零泄漏，完美适配响应式断点。
