给子元素设置背景色，超出父元素的部分为什么没有背景色？

从现在开始，我们要努力学习啦！今天我给大家带来《给子元素设置背景色，超出父元素的部分为什么没有背景色？》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

给子元素设置背景色，超出父元素的部分为什么没有背景色？插图

给子元素设置背景色超出部分如何处理？

问题描述：给父元素固定宽高并设置滚动条，给块级子元素设置背景色，但超出部分没有背景色。

代码演示：

.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/)

今天关于《给子元素设置背景色，超出父元素的部分为什么没有背景色？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在米云公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

近期文章