<script setup lang="ts">
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>
    <!-- m-list没有被撑开 -->
    <!-- <div class="m-list">
      <div class="m-item" v-for="item in Array.from({ length: 20 }, (_, index) => index)">
        {{ item }}
      </div>
    </div> -->
    <!-- 在m-list外层在包裹一个display:flex，m-list被撑开 -->
    <div class="m-list-wrap">
      <div class="m-list">
        <div class="m-item" v-for="item in Array.from({ length: 20 }, (_, index) => index)">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.m-list-wrap {
  display: flex;
  height: 400px;
  overflow-y: auto;
}
.m-list {
  display: flex;
  height: 200px;
  flex: 1;
  background: #ddd;
}
.m-item {
  width: 300px;
  flex-shrink: 0;
  display: inline-flex;
}
</style>

参考链接

https://blog.****.net/qq_43231248/article/details/140657678

人工智能学习网站

https://chat.xutongbao.top