Question

我只想使flexbox div可滚动（x轴或y轴），但是无论我做什么，整个页面也都可以滚动。

我看过this Stack Overflow question，但答案不能解决我的问题。

我注入了一些ruby代码以创建与数据库中一样多的serving-choices。它们都在我想滚动的flexbox中。

这是我的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;
}

这是我从另一篇SO帖子中添加的JavaScript：

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

哪些方法不起作用，如何解决此错误？

如何仅使flexbox div滚动而不使整个html页面滚动？

0 个答案: