块级元素背景色丢失：为什么在滚动父元素后子元素背景色会消失？

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《块级元素背景色丢失：为什么在滚动父元素后子元素背景色会消失？ 》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

块级元素背景色丢失问题

在设置父元素为固定宽高并超出部分可滚动后，子块级元素的背景色可能丢失，尤其是在子元素最初被隐藏的部分。

举个例子，代码如下：

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

.son {
    background: greenyellow;
}

在这种情况下，"son"元素的背景色在可见部分正确显示，但在超出部分却消失了。这是因为块级元素默认具有width: 100%，导致它们无法在父元素中挤在一起。

为了解决这个问题，可以给"son"元素设置width: fit-content，这将允许其自然宽度适应其内容。这样，"son"元素就可以超出父元素的宽度，背景色也可以正确显示。

最终代码如下：

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

.son {
    background: greenyellow;
    width: fit-content;
}

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~