如何让可水平滚动父DIV内的子DIV占满父元素完整内容宽度

问题原因 #

默认情况下块级元素的width: 100%是基于父元素的可见内容宽度计算，而非被内部溢出内容撑开的实际滚动总宽度。
你的父容器.main默认宽度等于外层视口宽度，内部的.main_sub因为包含20个宽度为50px的inline-block子元素，实际被撑到了1000px宽度，但.main本身的宽度没有随内部内容同步扩张，所以.child_sub的100%宽度只会等于视口宽度，滚动时自然无法覆盖全部区域。

可行修改方案 #

仅需要调整3行CSS代码即可实现需求：

1. 给.main添加display: inline-block和min-width: 100%属性，让父容器宽度随内部内容自动撑开，同时保证内容较少时也能占满整个视口宽度
2. 给.child_sub添加white-space: normal属性，避免内部文本继承父级的white-space: nowrap强制不换行
   修改后的完整CSS代码如下：

.main {
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    /* 新增属性 */
    display: inline-block;
    min-width: 100%;
}
.main_sub {
  width:100%;
}
.main_sub_sub {
  display:inline-block;
  width:50px;
}
.child_sub {
  width:100%;
  background:darkred;
  color:white;
  /* 新增属性 */
  white-space: normal;
}

修改后再次运行代码，滚动父容器时.child_sub就能完整覆盖整个滚动区域的宽度。 #

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