slideDown 不适用于带有 Flex 显示的响应式切换

所以这是我的 JSFiddle 来设置问题空间https://jsfiddle.net/67nx5paw/11/

首先，我有一个导航栏，它会折叠起来使用切换图标来显示菜单。我尝试使用slideDown和slideToggle函数，但是它们没有做任何事情。我正在使用的 jQuery 如下（我什console.log至用来检查它是否被调用，它是。

$(function() {
    $('#toggle').on('click', function(e) {
        console.log('Clicked');
        $('#content').slideToggle();
        e.preventDefault();
    });
});

如小提琴链接中所示，我display: flex在导航元素上使用，然后调用display: none将它们隐藏在相应的视图中。由于显示flex值，切换是否不起作用？