flex横向布局超出部分滚动，使用Flexbox布局时，内容超出容器宽度时，容器内部出现横向滚动条而不是压缩子元素

        在使用Flexbox布局时，如果希望当内容超出容器宽度时，容器内部出现横向滚动条而不是压缩子元素，可以按照以下步骤设置CSS：

        1. 父容器（即flex容器）应该被设置为display: flex;。
        2. 为了确保父容器不会压缩子元素，需要给子元素设置flex-shrink: 0;。这将阻止子元素缩小其初始尺寸。
        3. 给父容器添加overflow-x: auto;属性，这样当内容超出父容器的宽度时，会显示一个水平滚动条。
        4. 如果不想让垂直方向也出现滚动条，可以加上overflow-y: hidden;。

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <!-- 更多的flex-item -->
</div>

.flex-container {
  display: flex;
  overflow-x: auto; /* 水平滚动条 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  /* 设置父容器的具体宽度，或者让它根据内容自适应 */
}

.flex-item {
  flex: 0 0 auto; /* 不伸缩，固定宽度 */
  width: 100px; /* 每个项目的宽度 */
  margin-right: 10px; /* 项目之间的间隔 */
  text-align: center;
  line-height: 100px; /* 行高与宽度相同，使内容垂直居中 */
}

        上述代码中，.flex-container是包含所有.flex-item的父容器。每个.flex-item都有固定的宽度，并且不会因为容器空间不足而收缩。如果所有子项的总宽度超出了父容器的宽度，用户可以通过水平滚动来查看所有的子项。