在flexbox Div中添加可滚动Div

在flexbox中添加可滚动的Div，可以通过设置Flex容器和Flex项的属性来实现。

首先，将外层的Div设置为Flex容器，可以使用以下CSS属性：

display: flex;   // 设置为Flex容器
flex-direction: column;   // 将Flex项垂直排列

然后，在Flex容器中添加一个Div作为Flex项，用于容纳内容，同时设置以下CSS属性：

flex: 1;   // 让该Flex项占满剩余空间
overflow-y: auto;   // 添加垂直滚动条

最后，将需要滚动的内容放置在这个Flex项内：

<div style="display: flex; flex-direction: column;">
  <div style="flex: 1; overflow-y: auto;">
    <!-- 可滚动内容 -->
  </div>
</div>

这样，当内容超出Flex项的高度时，会自动出现垂直滚动条，实现可滚动的效果。

在实际应用中，这种可滚动的Flexbox布局适用于需要在一定高度内显示可变数量的项目，比如聊天记录、商品列表等。

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

• 腾讯云开发者工具套件：https://cloud.tencent.com/product/devtools
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网通信（IoT）：https://cloud.tencent.com/product/iotcloud
• 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云视频直播（Live）：https://cloud.tencent.com/product/live