flex布局并实现滚动条

可以使用Flex布局来实现滚动条。下面是一个使用Flex布局实现滚动条的示例代码：

HTML代码：

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

CSS代码：

.container {
  display: flex;
  overflow: auto;
}

.content {
  /* 设置内容区域的宽度为100%以充满容器 */
  width: 100%;
}

在上述代码中，我们创建了一个容器元素（`<div class="container">`），并使用Flex布局将其子元素水平排列。通过设置`overflow: auto;`，我们可以在内容超出容器尺寸时自动生成滚动条。内容区域（`<div class="content">`）会根据容器的尺寸自动调整宽度，并填充整个容器。

你可以将具体的内容添加到`<div class="content">`中，当内容超出容器的尺寸时，就会出现滚动条。