Element-plus01 Scrollbar 滚动条横向滚动失效问题

1. 横向滚动原理

当元素宽度大于滚动条宽度时，会显示横向滚动条。

2. 官网源码

<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar>
</template>

<style scoped>
.scrollbar-flex-content {
  display: flex;
  width: fit-content;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>

3. 图片横向滚动失效代码

直接包裹

<el-row v-if="form.images && form.images.length > 0" style="margin-top: 20px;">
    <el-col :span="24">
        <el-form-item label="问题图片" prop="images">
          <el-scrollbar>
             <el-image show-progress style="width: 100%; height: 100%;" fit="fill" :preview-src-list="form.images.map(item => item.url)" :initial-index="index" :src="imageObj.url" lazy />
          </el-scrollbar>
        </el-form-item>
    </el-col>
</el-row>

4. 修正后正常横向滚动图片代码

<el-row v-if="form.images && form.images.length > 0" style="margin-top: 20px;">
    <el-col :span="24">
        <el-form-item label="问题图片" prop="images">
          <el-scrollbar>
            <div class="scrollbar-flex-content">
              <div v-for="(imageObj, index) in form.images" :key="index" class="scrollbar-demo-item" >
                <el-image show-progress style="width: 100%; height: 100%;" fit="fill" :preview-src-list="form.images.map(item => item.url)" :initial-index="index" :src="imageObj.url" lazy />
              </div>
            </div>
          </el-scrollbar>
        </el-form-item>
    </el-col>
</el-row>

<style scoped>
.scrollbar-flex-content {
  margin-top: 20px;
  display: flex;
  width: fit-content;
  padding: 20px;
  // height: 350px;
}
.scrollbar-demo-item {
  // border: 3px solid red;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>