请教下这个背景色怎么搞?

Question

给父元素固定宽高超出部分可以滚动,给子元素(块级元素)设置背景色,但是初始隐藏掉的部分没有加上背景色,这个要怎么解决?效果如下:

.parent{
    width: 100px;
    padding-left:10px;
    overflow:auto;
}

.son{
    background: greenyellow;
}

Answer 1

没有复现你遇到的问题，提供更加完整的例子可能会更快的解决问题。

---

切换为块级元素之后，会因为块级元素自带的 width:100% 属性导致容器宽度不够，但是连续字母和数字因为 word-break 的缘故，不会自动折行。所以会直接超出 .son 元素的宽度，这点可以从审查元素上面看到：

如果想要文字折行，就需要给 .son 增加 word-break:break-all 或者 word-break:break-word属性，但是这样就 .son 元素就不会超出 .parent 元素的宽度了（也就不会出现横向滚动条了）。

所以如果想要保证超出滚动的情况，给 .son 元素设置 width:fit-content 就可以了。

---

相关阅读
fit-content - CSS | MDN
fit-content « 张鑫旭-鑫空间-鑫生活