使用flex时，滚动div而不是整个页面

可以通过以下步骤实现：

1. 首先，确保你的HTML结构中有一个包含内容的父容器div，并设置其样式为flex布局。例如：

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

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置父容器的高度，使其占满整个视口 */
  overflow-y: auto; /* 允许垂直滚动 */
}

1. 在父容器内部，创建一个包含内容的子容器div，并设置其样式为flex项。例如：

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

.content {
  flex: 1; /* 设置子容器的flex属性为1，使其占据剩余空间 */
}

1. 确保父容器的高度大于子容器的高度，这样才会出现滚动条。可以通过设置父容器的高度为视口高度（vh）来实现。

这样，当内容超出父容器的高度时，父容器会出现垂直滚动条，只滚动内容区域而不是整个页面。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供灵活可扩展的云服务器实例，适用于各种应用场景。详情请参考：腾讯云云服务器
• 腾讯云对象存储（COS）：提供安全可靠、低成本的云端存储服务，适用于存储和处理各种类型的数据。详情请参考：腾讯云对象存储
• 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的云数据库服务，适用于各种规模的应用。详情请参考：腾讯云云数据库MySQL版
• 腾讯云人工智能（AI）：提供丰富的人工智能服务和解决方案，包括图像识别、语音识别、自然语言处理等。详情请参考：腾讯云人工智能
• 腾讯云物联网（IoT）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等。详情请参考：腾讯云物联网
• 腾讯云区块链（Blockchain）：提供安全可信的区块链服务，适用于各种行业的应用场景。详情请参考：腾讯云区块链
• 腾讯云音视频处理（VOD）：提供高效、稳定的音视频处理服务，包括转码、截图、水印等功能。详情请参考：腾讯云音视频处理
• 腾讯云云原生应用引擎（Tencent Cloud Native Application Engine）：提供全托管的云原生应用引擎，支持快速构建、部署和管理容器化应用。详情请参考：腾讯云云原生应用引擎