在前端开发中，使用Element-UI框架时，有时会遇到需要让超过24格的元素在一行显示并且支持滚动的需求。这在处理大量元素展示，又不想分页影响用户体验时非常实用。

我们要明确Element-UI的栅格系统默认是按照24格进行布局的。常规情况下，一行最多均匀分布24个元素。但要实现超24格元素一行显示，我们需要调整CSS样式。

我们可以创建一个自定义的容器类，比如.custom-scroll-container。在这个容器内放置所有的元素。然后，通过设置white-space: nowrap属性，确保内部元素不会换行，都在一行显示。例如：

.custom-scroll-container {
  white-space: nowrap;
}

接下来解决滚动的问题。为了让内容在超过容器宽度时能够滚动，我们需要给容器添加overflow-x: auto样式，这样当元素总宽度超过容器宽度时，水平方向会出现滚动条。代码如下：

.custom-scroll-container {
  white-space: nowrap;
  overflow-x: auto;
}

在HTML部分，将所有需要展示的元素放在这个自定义容器内。比如我们有多个<el-card>组件：

<div class="custom-scroll-container">
  <el-card v-for="(item, index) in elementList" :key="index">
    <!-- 卡片内容 -->
  </el-card>
</div>

这里的elementList是存储所有元素数据的数组，通过v-for指令循环渲染出所有的元素。

另外，为了提升用户体验，我们还可以添加一些样式优化。比如隐藏滚动条的默认样式，使用自定义的样式，让滚动条看起来更美观。可以通过以下代码实现：

.custom-scroll-container::-webkit-scrollbar {
  height: 6px;
}
.custom-scroll-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

通过以上步骤，我们就能在Element-UI中轻松实现超过24格元素一行显示且支持滚动的效果，为用户提供更流畅的浏览体验。