Jquery “滑入”面板以缩小视口

我已经创建了很多次从页面边缘滑入的面板，但它们通常要么在页面内容上滑动，要么将页面内容推离屏幕的另一边，这通常是理想的效果

我现在试图实现的是一个从左侧滑入的面板，这样做既不会覆盖页面内容，也不会将其推离屏幕，而是缩小显示页面内容的视口。我的页面是响应性的，因此如果我手动调整浏览器窗口的大小，使其稍微窄一点，页面上的所有内容都会调整得很好。这就是我希望通过滑入面板实现的效果，使所有页面内容都可见且功能正常，但只是在稍微窄一点的视口中，新面板占据剩余的宽度

---

我尝试过各种方法，但到目前为止没有任何效果。我曾试图思考什么样的示例代码可能有用，但由于我没有任何远程工作的东西，而且我所描述的理论上非常简单，希望仅此描述就足够了。

我的建议是使用

display:flex在body标签上

例如：


$（'.nav open'）。单击（函数（e）{
$（“侧边栏”）。切换（“幻灯片”）；
});
正文{
背景色：白色；
字体系列：无衬线；
文本对齐：居中；
填充顶部：30px；
宽度：100%；
显示：-webkit flex；
显示器：flex；
保证金：0；
}
#主要内容{
背景色：红色；
高度：250px；
宽度：100%；
}
/*对于侧边栏*/
.导航打开{
高度：30px；
位置：绝对位置；
光标：指针；
z指数：2；
排名：0；
背景颜色：灰色；
}
div#侧边栏{
最小宽度：50%；
背景色：#d4d2cb；
显示：无；
最小高度：100%；
}

打开边栏
边栏
这是主页