css父元素设置为grid且overflow-y = auto时父元素的padding-bottom不生效

Question

如下是一个grid布局示例，给content区域设置了padding: 24px，但是当content区域出现滚动条时content的padding-top,padding-left,padding-right都生效，唯独padding-bottom不生效了。

<template lang="html">
  <div class="app">
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="content">
      <div class="card" v-for="i in 21">
        {{ i }}
      </div>
    </div>
    <div class="footer">Footer</div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
.app {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 64px auto 100px;
  grid-template-areas:  'header header'
                        'menu content'
                        'footer footer';
}

.header {
  background-color: #fff5e7;
  grid-area: header;
}

.menu {
  background-color: #eaf8ed;
  grid-area: menu;
}

.content {
  background-color: #faebea;
  grid-area: content;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
  overflow-y: auto;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;
  height: 200px;
}

.footer {
  background-color: rgba(0,117,222,0.10);
  grid-area: footer;
}
</style>

Answer 1

我今天也遇到了 通过在外部包裹一个div 把padding 和 overflow: auto 放到外部div就可以解决