当包含元素有滚动条时，如何正确地划分网格？

<style>
  .grid-container {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    overflow: auto;
  }

  .grid-item {
    background-color: #ccc;
    padding: 20px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Grid Item 1</div>
  <div class="grid-item">Grid Item 2</div>
  <div class="grid-item">Grid Item 3</div>
  <div class="grid-item">Grid Item 4</div>
  <div class="grid-item">Grid Item 5</div>
  <div class="grid-item">Grid Item 6</div>
  <div class="grid-item">Grid Item 7</div>
  <div class="grid-item">Grid Item 8</div>
  <div class="grid-item">Grid Item 9</div>
</div>