Html 如何将侧边栏滑出视图并调整内容flexbox的大小以填充空白？

我的flexbox布局基于

我试图创建一个滑入/滑出导航侧栏，很像但使用flexbox布局，而不是绝对定位的div

我见过很多这样的flexbox滑动菜单，但它们似乎都将文章滑到了侧边栏上。我希望侧边栏在滑入和滑出视图时推/拉文章

为了实现这一点，我一直在

display:block

和

display:none

之间切换CSS显示属性。当侧边栏被隐藏，并且内容被自动调整大小以填充新的更大空间时，这种方法非常有效

但是，当我尝试使用translate属性（如

transform:translateX（-12em）

）将侧边栏滑出视图时，内容仍保留在同一位置，并且不会调整大小。这会留下一个可以看到父容器的孔

问题：如何将

nav

滑出视图，并调整

文章的大小以填补空白

注意：我希望在不使用javascript的情况下实现这一点。
转换纯粹是可视化的，它们实际上不会将元素从布局位置移动

改用
左边距



html，
身体，
主要的，
文章
导航，
旁白{
身高：97%；
框大小：边框框
}
身体{
背景色：#ccc；
利润率：1.5%；
}
主要{
显示器：flex；
弯曲方向：行；
弹性：1；
溢出：隐藏；
}
文章{
弹性：1；
}
导航，
旁白{
/*12em是侧边栏的宽度*/
弯曲度：012em；
过渡：裕度0.3秒
}
/*复选框切换导航可见性*/
输入导航{
左侧边缘：-12em；
}
输入：选中~导航{
左边距：0；
}

单击以切换导航
导航
文章
在一边
这可能是另一种方式


html，
身体，
主要的，
文章
导航，
旁白{
身高：97%；
框大小：边框框
}
身体{
背景色：#ccc；
利润率：1.5%；
}
主要{
显示器：flex；
弯曲方向：行；
弹性：1；
}
导航，
旁白{
/*12em是侧边栏的宽度*/
弯曲度：012em；
过渡：所有0.3秒轻松
}
/*复选框切换导航可见性*/
输入：选中~导航{
变换：translateX（0）；
弹性：1；
}
输入导航{
transform:translateX（-12em）；
弹性：0；
宽度：0px；
}
输入：选中~文章{
弹性：2；
}
输入~文章{
弹性：3；
}

单击以切换导航
导航
文章
在一边
related:谢谢你，迈克尔。相关的问题是关于flex-grow的，所以我不确定这是否是我想要的。或者，如果是，我看不出它在这种情况下会如何工作。
flex-grow
属性提供了一种方法，可以使flex容器的内容重新调整大小以填补空白。由于这似乎是你问题的主要部分，我发布了相关链接。我明白了，我将有一个剧本，谢谢你的提示。