Next.js添加padding后组件宽度超出100%问题求助

这不是Next.js的配置问题，是CSS盒模型的默认行为导致的：

• 默认情况下，元素的width仅计算内容区域宽度，padding和border会额外增加元素总宽度。你的.swap-div-5设置width:100%后，加上12px的内边距和1px的边框，总宽度会超过父容器的400px，从而出现溢出。

解决方案 #

有三种常用解决方式：

1. 添加box-sizing: border-box（推荐）
   让元素的width包含padding和border，直接解决宽度计算问题：

.swap-div-5{
    box-sizing: border-box; /* 新增该行 */
    width: 100%;
    border: 1px solid ${colors.outline};
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

如果想全局生效，可在全局样式中设置：

* {
    box-sizing: border-box;
}

2. 移除width:100%
   父容器是flex布局（display:flex + flex-direction:column），子元素默认会拉伸填满父容器可用宽度，无需手动设置width:100%，此时padding不会导致溢出：

.swap-div-5{
    /* 移除width:100% */
    border: 1px solid ${colors.outline};
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

3. 用calc()计算宽度
   手动减去padding和border的总宽度，这种方式灵活性较低：

.swap-div-5{
    width: calc(100% - 24px - 2px); /* 12px*2的padding + 1px*2的border */
    border: 1px solid ${colors.outline};
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

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