Jquery 响应菜单项css未堆叠在一起

我的手机菜单有一个小问题（最大宽度：768px），请查看->

问题似乎很简单：我希望4个菜单项堆叠在一起，而不是分散在整个窗口中

以下是我的导航容器的代码：

#menu-menu-ville {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0;
    width: 20rem;
    height: 100vh;
    background: #374875;
    transition: 0.6s;
    transform: translateX(-20rem);
    z-index: 999999;
    overflow-y: auto;
}

当我应用

{flex direction:column；}

时，它部分工作，但问题是菜单滚动现在是水平的，而不是垂直的

如果需要，您也可以检查我的jQuery脚本

$(document).ready(function() {
  (function($) {
     $(".header-icon").click(function(e) {
      e.preventDefault();
      $(".header-icon").css("opacity", "0");
      $(".logo-wrapper").css("right", "2px");
      $("#menu-menu-ville").css("transform", "translateX(0)");
      $(".overlay").css("visibility", "visible");
      $(".overlay").css("opacity", "0.6");
      $(".main-nav").css("translateX", "20rem");
      $("body").css("overflow", "hidden");
    });

    $(".overlay").click(function(e) {
      $(".header-icon").css("opacity", "1");
      $(".logo-wrapper").css("right", "15px");
      $("#menu-menu-ville").css("transform", "translateX(-20rem)");
      $(".overlay").css("visibility", "hidden");
      $(".overlay").css("opacity", "0");
      $("body").css("overflow", "initial");

    });

    $(".menu-item-has-children").click(function(e) {
      $(this).find(".sub-menu").slideToggle();

    });  
  });
});

---

提前，谢谢你的帮助

如果你想要这样的东西：

---

添加

项：弹性启动；调整内容：灵活启动

to#menu menu ville on mobile veiw

它的工作方式完全符合我的要求！谢谢！