如何实现div容器独立于其他元素的水平滚动效果？

现有代码问题 #

• id重复：两个div同时使用了#child作为id，id为唯一标识不能重复
• 滚动逻辑错误：overflow:auto加在了绝对定位的子元素上，且子元素设置了right:0会被父容器宽度限制，无法触发预期的滚动效果
• 父容器无高度：相对定位的外层div内部为绝对定位元素，无法被内容撑开高度，会导致内容不可见

修改后的完整实现 #

HTML代码 #

<div>
  <!-- 宽度100%的顶层div -->
  <div id="parent" style="width: 100%;">
    该div宽度始终为100%，随视口宽度自适应
  </div>
  <!-- 滚动触发外层容器 -->
  <div id="scrollWrapper" style="position: relative; width: 100%; min-height: 200px; overflow-x: auto;">
    <div class="child-container">
      可独立滚动的div内容，最小宽度500px
      <!-- 可自定义内部内容宽度，超出时触发滚动 -->
      <!-- <div class="inner-content">更宽的内容</div> -->
    </div>
  </div>
</div>

CSS代码 #

.child-container {
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  /* 移除right:0，避免被父容器限制宽度 */
  min-width: 500px;
  width: 100%;
  box-sizing: border-box;
}

/* 若需要内部内容超出时滚动，添加如下样式 */
/*
.child-container {
  overflow-x: auto;
}
.child-container .inner-content {
  width: 800px; // 自定义内容宽度
}
*/

实现效果说明 #

• 顶层#parentdiv始终保持100%宽度，和滚动区域完全独立，不会随滚动条变化
• 可滚动div最小宽度固定为500px，视口宽度小于500px时自动出现水平滚动条，无需对齐内容宽度
• 若需要内部内容更宽时触发滚动，只需给内部内容元素设置对应宽度，同时给.child-container添加overflow-x: auto属性即可

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