给子元素设置背景色超出部分如何处理？
问题描述：给父元素固定宽高并设置滚动条，给块级子元素设置背景色，但超出部分没有背景色。
代码演示：
.parent { width: 100px; padding-left: 10px; overflow: auto;}.son { background: greenyellow;}
登录后复制
解答：
经测试，未复现问题。请提供更完整的示例代码以便进一步排查。
可能的解决方案：
当子元素切换为块级元素时，由于其固有的 width: 100% 属性，可能导致容器宽度不足。因此，文字会直接超出子元素宽度，而不会自动折行。
解决方法：
给子元素添加 word-break: break-all 或 word-break: break-word 属性，使文字折行。但是，这会导致子元素不会超出父元素宽度，从而无法显示滚动条。给子元素设置 width: fit-content 属性。这样可以保证超出滚动条的情况，同时显示背景色。
参考链接：
[fit-content – CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content)[fit-content « 张鑫旭-鑫空间-鑫生活](https://x.ctf.org.cn/post/10058/)
以上就是给子元素设置背景色，超出父元素的部分为什么没有背景色？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2805931.html
