超出滚动部分如何添加背景色？
在 CSS 中，我们经常遇到这样的场景：给父元素设置固定宽高，并允许超出部分滚动；给子元素设置背景色，但初始隐藏的部分没有添加背景色。
这种情况下，解决方案可以从调整子元素的宽度和文字换行入手：
- 调整子元素宽度：将子元素的宽度设置为 fit-content，以便其宽度仅限于其内容的宽度。这将防止子元素超出父元素的宽度，并确保超出部分也不会超出。
- 强制文字换行：默认情况下，块级元素不自动换行。如果子元素中包含连续的字母和数字，它们可能会超出子元素的宽度。为了强制换行，可以在子元素上设置 word-break:break-all 或 word-break:break-word。
通过上述调整，子元素将具有正确的宽度并且文字会自动换行。超出滚动部分将包含子元素的背景色。
示例：
.parent {
width: 100px;
padding-left: 10px;
overflow: auto;
}
.son {
background: greenyellow;
width: fit-content;
word-break: break-all;
} 
