flex横向滚动移动端右边距失效问题

<template>
  <div class="outer">
    <div class="inner" v-for="item of 3" :key="item"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style lang="scss" scoped>
.outer {
  width: 300px;
  display: flex;
  border: 1px solid black;
  overflow-x: auto;
  padding-left: 20px;
}

.outer:after {
  content: '.';
  visibility: hidden;
  margin-left: -0.24em;
}

.inner {
  width: 160px;
  height: 180px;
  border: 1px solid red;
  flex: none;
  margin-right: 20px;
}
</style>