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

块级元素背景色丢失问题

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

举个例子，代码如下：

.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;
}

以上就是块级元素背景色丢失：为什么在滚动父元素后子元素背景色会消失？的详细内容，更多请关注其它相关文章！