如何在父元素超出部分滚动的情况下给子元素设置背景色？
在CSS中，有时候希望父元素固定宽高，超出部分可滚动，同时给子元素设置背景色。但如果子元素（块级元素）初始隐藏的部分未添加背景色，该问题如何解决？
以下是给出的案例：
.parent { width: 100px; padding-left: 10px; overflow: auto;}.son { background: greenyellow;}
不幸的是，在这个例子中，问题没有重现。提供更完整的示例可能有助于更快解决问题。
解决方案
切换为块级元素后，块级元素本身的 width: 100% 属性会导致容器宽度不够。但是，由于 word-break 的原因，连续的字母和数字不会自动折行，因此会直接超出 .son 元素的宽度。
如果要让文本折行，需要给 .son 添加 word-break: break-all 或 word-break: break-word 属性。但是，这会导致 .son 元素不再超出 .parent 元素的宽度（即不会出现横向滚动条）。
因此，如果要确保超出滚动的情况，可以给 .son 元素设置 width: fit-content 属性。
相关链接：
[fit-content – CSS | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/fit-content)[fit-content « 张鑫旭-鑫空间-鑫生活](https://www.zhangxinxu.com/wordpress/?p=12319)
以上就是父元素超出部分滚动时，如何给子元素设置背景色？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557441.html
微信扫一扫 
支付宝扫一扫 
