如何不使用flexbox实现内容偏出屏幕且不出现多余滚动条？

问题原因 #

• 你给.inner设置了absolute绝对定位，元素脱离正常文档流，父级容器无法识别它的宽高，所以#home区块无法被撑开自适应高度
• 绝对定位元素超出视口的部分不受父级overflow-x:hidden的完全约束，会触发页面级横向滚动条

推荐修复方案（兼容现有flex布局） #

不需要调整现有HTML结构，仅修改.inner的CSS规则即可：

.hero-img {
    width: 100%;
    height: auto;
}
.img-container {
    max-width:345px;
    max-height:580px;
}
.inner{
    /* 删除原有position: absolute、right: -172px规则 */
    transform: translateX(172px);
}

实现逻辑：transform位移不会改变元素在文档流中的占位，父级容器可以正常获取元素高度实现自适应，同时位移超出父级的部分会被父级已设置的overflow-x:hidden裁剪，不会触发横向滚动条，图片可保持原始尺寸，刚好实现第三张图片一半露出在屏幕外的效果。

完全不使用flex的替代方案 #

如果要完全移除flex依赖，调整CSS规则如下即可：

.hero-img {
    width: 100%;
    height: auto;
}
.img-container {
    max-width:345px;
    max-height:580px;
    display: inline-block;
    margin-right: 16px; /* 对应原flex布局的gap-4间距 */
}
.inner{
    transform: translateX(172px);
    white-space: nowrap;
}

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