Javascript CSS继承不响应父元素中的更改

我正在将页面拆分为

。左侧

和

。右侧

的顶部固定有导航。已经很难将导航设置为其父级的全宽

。右侧

，因此我不得不使用

宽度：继承，左侧：继承

到目前为止还不错，看起来很棒

现在，父级可以使用class

active

将其宽度增加到100%。宽度为inherit的子导航不响应该更改

看一看:

.right-side{
  padding-top: 190px;
  width: 83.33333333%;
  float: right;
  display: block;
  position: relative;
  background-color: #fff;
  transition: width 0.5s;
}
.right-side.active{
  width: 100%;
}
nav.navbar {
  background-color: #F1ECD8;
  width: inherit;
  right: 0px;
  left: inherit;
}

当添加class

active

时，右侧会做出响应，但导航不会随之增加或改变。我怎样才能解决这个问题

我应该提到的是，当我在chrome开发工具中手动执行此操作时，它可以正常工作。

尝试以下操作：

.right-side{
  padding-top: 190px;
  width: 83.33333333%;
  float: right;
  display: block;
  position: relative;
  background-color: #fff;
  transition: width 0.5s;
}
.right-side.active{
  width: 100%;
}
nav.navbar {
  background-color: #F1ECD8;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
}

---

简单的解决方案是：将

nav.navbar

更改为

width:100%

。它将获得其父级的100%，即

。右侧

不太容易吞咽的解决方案：考虑<强> >不/强>使用浮点进行布局，以及<强>不>强>使用非语义类名称，如<代码>左侧，<代码>右侧< /代码>为您的元素。如果您使用
display:inline block
甚至flexbox进行布局，您会发现遇到的问题更少。
请使用代码片段将HTML和CSS放入其中。我的HTML都在reactjs:）这有什么关系？获取输出，而不是输入。但是，我需要将导航栏固定到顶部：S