父元素滚动覆盖子元素背景色
在网页布局中，如果父元素设置为固定宽高并启用滚动，而子元素又设置了背景色，可能会遇到这样的问题：子元素被隐藏的部分无法显示背景色。
问题重现
以下是导致问题的代码示例：
.parent {
width: 100px;
padding-left: 10px;
overflow: auto;
}
.son {
background: greenyellow;
}解决方法
此问题的原因是子元素虽然被隐藏，但仍会占据空间，导致超出部分的背景色无法显示。
一种解决方法是将子元素的 width 属性设置为 fit-content，这将确保子元素只占据其内容所需的宽度，从而避免超出父元素宽度的情况。
.son {
background: greenyellow;
width: fit-content;
}另一种方法是在子元素上添加 word-wrap: break-word 属性，这样文字将自动折行，不会超出父元素宽度。
注意
这些解决方案适用于此特定场景。在其他情况下，可能需要采用不同的方法来解决隐藏部分背景色缺失的问题。
