How to make only flexbox div scroll, not the whole html page?

Question

I want to make only my flexbox div scrollable (x or y axis) but no matter what I do, the whole page becomes scrollable too.

I have looked at this Stack Overflow question but the answer doesn't solve my problem.

I inject some ruby code to create as many serving-choices as there are in my database. They are all in a flexbox that I want to be scrollable.

Here is my HTML code:

<div id="menu-of-the-day-wrapper">
  <h3>Starters</h3>
  <hr>
  <div class="category-wrapper">
    <%@starters.each do |starter|%>
    <div class="serving-choices">
      <%= f.label :starter_choice, "", :value => starter.id do %>
      <div class="meal-detail">
        <%= f.radio_button :starter_choice, starter.id %>
        <div class="card">
          <img src="">
          <div class="card-body">
            <h5 class="meal-description card-title"><%= starter.name %></h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a class="btn btn-sm btn-primary" href="#">Plus d'info</a>
          </div>
        </div>
      </div><%end %>
    </div><%end %>
  </div>
</div>

My CSS :

#menu-of-the-day-wrapper {
  width: 95%;
  margin: 10px auto;
  display: flex;
  flex-flow: column wrap;
}
.category-wrapper {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  overflow-x: scroll;
  justify-content: space-around;
  height: 85vh;
  min-height: min-content;
  width: 95vw;
  margin-bottom: 50px;
  background-color: #F5F7FA;
}

Here is JavaScript I've added from another SO post:

$(".category-wrapper").hover(function() {
  $('body').css('overflow', 'hidden');
}, function() {
  $('body').css('overflow', 'auto');
});

Which didn't work, how do I fix this error?