在滚动的flexbox容器上扩展背景

是指在使用flexbox布局的容器中，当内容超出容器高度而产生滚动时，希望背景能够随着内容的滚动而扩展。

为了实现在滚动的flexbox容器上扩展背景，可以使用CSS的伪元素(::before或::after)来创建一个伪元素，并将其设置为容器的子元素。然后，通过设置伪元素的高度为100%和宽度为100vw（视口宽度），以覆盖整个容器的背景。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

CSS:

.container {
  display: flex;
  overflow-y: auto;
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
  z-index: -1;
}

.content {
  flex: 1;
  /* 其他样式 */
}

在上述代码中，我们创建了一个名为.container的容器，并设置其为flex布局。通过设置overflow-y为auto，当内容超出容器高度时，会自动显示滚动条。

然后，我们使用伪元素.container::before来创建一个覆盖整个容器的背景。通过设置其position为absolute，并设置top、left为0，使其与容器重合。将其宽度设置为100vw，以覆盖整个视口宽度，高度设置为100%，以覆盖整个容器高度。通过设置background属性，可以自定义背景样式，这里使用了一个渐变背景。

最后，我们在容器内部创建了一个名为.content的子元素，用于放置实际的内容。通过设置flex: 1，使其占据剩余的空间。

这样，当容器的内容超出容器高度时，背景会随着内容的滚动而扩展，实现了在滚动的flexbox容器上扩展背景的效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）是一种可弹性伸缩的云服务器，提供高性能、高可靠性的计算能力，适用于各种应用场景。您可以根据实际需求选择不同配置的云服务器，满足您的计算需求。

腾讯云对象存储（COS）是一种安全、稳定、低成本的云端存储服务，适用于存储和处理各种类型的数据。您可以将背景图片等静态资源存储在腾讯云对象存储中，并通过提供的链接地址在网页中引用。

更多关于腾讯云云服务器（CVM）的信息，请访问：腾讯云云服务器（CVM）产品介绍

更多关于腾讯云对象存储（COS）的信息，请访问：腾讯云对象存储（COS）产品介绍