css 在一個固定大小的box中放很多小box，内部長度溢出時用滑動展示

CSS 中实现一个固定大小的盒子（主容器）内放置多个可滚动的小盒子，通常可以结合 `display: flex` 或者 `grid` 实现，配合使用 `overflow-x` 属性来处理水平方向的溢出内容。这里是一个基本的示例：

1. 使用 `display: flex`:

.container {
  width: 300px; /* 主容器宽度 */
  height: 200px; /* 主容器高度 */
  overflow-x: auto; /* 当内容超出左侧时显示滚动条 */
}

.box-container {
  display: flex;
  flex-wrap: wrap; /* 容器内的项目允许换行 */
}

然后在 `.box-container` 下添加小盒子：

<div class="container">
  <div class="box-container">
    <div class="small-box" style="width: 80px;">小盒1</div>
    <div class="small-box" style="width: 150px;">小盒2</div>
    <!-- 更多小盒... -->
  </div>
</div>

2. 如果使用 CSS Grid:

.container {
  display: grid;
  width: 300px;
  height: 200px;
  overflow-x: auto;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); /* 自动适应，最小宽度60px */
  gap: 5px;
}

.small-box {
  /* 样式... */
}

在这个例子中，小盒子会自动适应容器，并在需要时开始水平滚动。