Html 如何使用css修复左侧网格中的顶部栏，而不将其与下一个右侧网格元素重叠？

我正在使用MaterialUI和react，我需要修复顶部栏（不在页面顶部），它是网格元素（父元素）的顶部栏

我尝试用以下方法修复顶栏（儿童）：

导航：{
位置：'固定'，
最大宽度：“47vw”，
}

网格（父网格）是：

根目录：{
最大宽度：“100vw”，
}

---

但是，如果网格（父网格）的宽度发生变化，顶栏将在其父网格元素旁边的另一个网格元素上重叠。我们如何修复此重叠？或者是否有任何css属性flex继承父级属性的解决方案

物料界面默认使用

display:flex

，在flex系统中使用

flex grow:1

例如，如果您需要该元素占据某些块，则必须使用

flex basis

，对于每个元素的页面分辨率随更改而增长，则必须设置

flex grow:1

，这意味着特定项的增长与其他项的增长相同 关于flex basis，请阅读以下内容：

对于flex grow，请阅读以下内容：

---

请创建一个演示您的问题的示例。你很难理解你所提供的东西有什么问题。另外，

position:fixed

听起来不太合适。/：我的问题实际上是这样的。