Element-UI的el-col组件在span属性值总和超过24时会自动换行，这限制了其在某些布局场景下的应用。 如果需要在span值超过24的情况下，仍然在一行显示所有el-col组件，并使用水平滚动条查看超出部分内容，则需要绕过el-row和el-col组件的默认布局机制。
直接使用el-row和el-col无法实现此效果，因为el-col的span属性值决定其在el-row中的比例，而el-row会根据总span值自动换行。
解决方法是使用CSS来控制元素的显示方式。 我们可以将包含所有el-col组件的父容器设置为display: flex，并设置overflow-x: auto来启用水平滚动条。 同时，需要为每个子元素设置合适的宽度。
以下是一个示例，展示如何使用纯CSS实现此效果，无需依赖Element-UI的el-row和el-col组件：
Item {{ i }}
在这个例子中，我们将每个flex-item的宽度设置为15%，总宽度超过100%，从而触发水平滚动条。 min-width属性保证了即使窗口很窄，元素也不会变得太小。 margin-right属性控制了元素之间的间距。 你需要根据实际需求调整宽度、最小宽度和间距的值。 这是一种更灵活的方案，但需要自行管理元素的样式和布局。
记住，这种方法放弃了Element-UI组件的布局功能，需要自行处理元素的样式和间距。 如果你的布局相对简单，这种方法比较高效；如果布局复杂，可能需要考虑其他更复杂的解决方案。
