flex布局下设置width:100%的子元素margin/padding不生效问题求助

问题根因 #

你遇到的溢出问题由两个样式叠加导致：

• flex容器设置了align-items: flex-start，子元素不会自动拉伸适配容器宽度，超出部分直接溢出
• .elem未设置box-sizing: border-box，框架自动生成的width: 100%仅计算内容宽度，不会包含元素自身的左右padding，最终元素总宽度 = 父容器内容宽度 + 左右padding，自然超出容器导致右侧边距无法显示

解决方案 #

无需修改你提到的受约束属性，仅需给.elem添加box-sizing: border-box规则即可解决问题，该属性会将padding纳入元素宽度的计算范围，保证width: 100%的实际总宽度刚好适配父容器的可用宽度。
如果仍有极端场景下的溢出问题，可以额外补充max-width: 100%规则做兜底。

修改后的样式代码 #

.flexbox {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}
.elem {
    margin-top: 1rem;
    padding: 2rem;
    background-color: aqua;
    /* 新增以下规则 */
    box-sizing: border-box;
    /* 可选兜底规则 */
    max-width: 100%;
}

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