Displaying overflow scroll bar on a column flexbox

Question

I'm trying to set up an infinite scrolling on my project, but I have difficulties to make the overflow-y: auto; css property to work. Here's my current layout:

And I'm creating it using the following CSS/HTML code:

<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 */
}

My current troubleshooting steps:

• I've already tried this StackOverflow Post (Scrolling a flexbox with overflowing content) without any success, the overflow bar doesn't appear at all.
• If using overflow-y: scroll, only a deactivated scrolling bar seems to appear.
• The size of the element is bigger than the size of the window, so the elements seems to appear out of the displayed space anyway.

Does anyone have an idea on how to make the scrolling bar appear ?

Answer 1

Give the container .flex-items a fixed height or max-height, overflow only works if the content of a container exceeds the height of the container

.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

The parent container needs to have fixed height and the total height of its' child elements need to exceed it. Thus, you would get a scrollbar on the parent.

Then, add scroll event handler to the parent container to check if the user has scrolled to the bottom and fetch more items if so.

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

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

container.addEventListener('scroll', loadItems);