设置display:flex与width:100%导致元素横向偏移，仅修改section、panel类如何修复

问题根本原因 #

• 盒模型溢出：.panel同时设置width: 100%和左右各5px外边距，标准盒模型下元素总占位宽度为父容器宽度+10px，超出父容器.section的可用宽度，触发横向滚动。
• flex默认行为影响：flex容器默认不会强制子元素折行，且min-width默认值为auto，内部长内容会进一步撑宽容器，加剧溢出问题。

修复方案 #

可以仅通过修改section和panel两个类的样式解决问题，修复后无论纵向滚动条是否显示，panel的5px外边距都能正常生效，不会出现横向偏移。修改后的样式如下：

.section{
  overflow-x: hidden; /* 禁止横向滚动，若需保留横向滚动能力可改为auto，不会影响效果 */
  overflow-y: scroll;
  width : 100%;
  border: 2px solid blue;
  box-sizing: border-box; /* 确保自身边框计算在100%宽度内，避免额外溢出 */
}

.panel{
  /* 移除原width: 100%配置：块级flex容器默认会占满父容器可用宽度，自动扣除外边距空间 */
  margin: 5px;
  display:flex; 
  flex-wrap: wrap; /* 子元素超出宽度时自动折行，避免撑宽容器 */
  min-width: 0; /* 强制flex容器遵守父容器宽度限制，避免内部长内容撑破容器边界 */
}

如果你不想移除width:100%的配置，也可以用calc动态计算宽度，效果一致：

.panel{
  width: calc(100% - 10px); /* 减去左右margin合计的10px，刚好适配父容器宽度 */
  margin: 5px;
  display:flex; 
  flex-wrap: wrap;
  min-width: 0;
}

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