解决div横向滚动条，背景色未铺满问题

 

问题描述：div等块级元素默认宽度为100%，当页面渲染完后其宽度已经固定，这时候如果文字超出其宽度后会出现滚动条，这时超过原宽度的部分背景可能跟div定义的背景色不一样；

 

 

解决方式：给最外层div添加样式：

 

min-width: max-content;

 

解决之后效果如图下所示：

 

 

 扩展：max-content 和fit-content， 当元素内容没有超出行宽的时候，最终的宽度都是内容的宽度。而超出行宽的时候，max-content的表现是不换行，出现横向滚动条，fit-content的表现是会换行