Как сделать только прокрутку div во Flexbox, а не всю HTML-страницу?

Question

Я хочу сделать прокрутку только моего flexbox div (ось x или y), но независимо от того, что я делаю, вся страница тоже становится прокручиваемой.

Я посмотрел на этот вопрос переполнения стека , но ответ не решил мою проблему.

Я ввожу некоторый код ruby, чтобы создать столько serving-choices, сколько имеется в моей базе данных. Они все во флексбоксе, который я хочу прокручивать.

Вот мой HTML-код:

<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>

Мой 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;
}

Вот JavaScript, который я добавил из другого SO сообщения:

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

Что не сработало, как мне исправить эту ошибку?