在列 flexbox 上显示溢出滚动条

Question

我正在尝试在我的项目上设置无限滚动，但我很难使 overflow-y: auto; css 属性正常工作。这是我当前的布局：

我正在使用以下 CSS/HTML 代码创建它：

<div class="flex-items">
      <div v-for="game in gamesData.games" class="card-spacing">
        <!-- Contents -->
      </div>
</div>

.flex-items {
  flex: 1;
  display: flex;
  overflow: auto;
  flex-direction: column;
}
.card-spacing {
  margin-bottom: 10px;
  min-height: min-content; /* needs vendor prefixes */
}

我目前的故障排除步骤：

• 我已经尝试过这个StackOverflow Post (Scrolling a flexbox with overflowing content) 没有任何成功，溢出栏根本没有出现。
• 如果使用overflow-y: scroll，似乎只会出现一个停用的滚动条。
• 元素的大小大于窗口的大小，因此元素似乎无论如何都超出了显示的空间。

有人知道如何让滚动条出现吗？

Answer 1

给容器.flex-items一个固定的height或max-height，只有当容器的内容超过容器的高度时溢出才会起作用

.flex-items {
  flex: 1;
  display: flex;
  height: 500px // specify a height
  min-height: 100%; // take up the full height of its own container
  overflow: auto;
  flex-direction: column;
}

Answer 2

父容器需要有固定的高度，并且它的子元素的总高度需要超过它。因此，您会在父级上获得一个滚动条。

然后，将滚动事件处理程序添加到父容器以检查用户是否已滚动到底部，如果是，则获取更多项目。

const container = document.querySelector('.flex-items');

function loadItems() {
  if (container.scrollTop === container.scrollTopMax) { 
    // fetch more items
  }
}

container.addEventListener('scroll', loadItems);