Vue父组件和子组件对于width:100%和width:inherit

我想让子组件的宽度等于父组件的宽度。
父组件宽度为一个具体值比如说1000px.我将子组件宽度设为了100%。按道理说应该是可以等于父组件的宽度的，但结果并没有，而是通栏了。然后我又将子组件宽度设为了inherit。结果宽度就是父组件的宽度了。

//父组件
 <div class="app-container">
    <Header></Header>
  </div>
<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
  width: 80%;
  margin: 0 auto;
}
</style>

//子组件
  <div class="header-container">子组件</div>
<style lang="less" scoped>
.header-container {
  height: 45px;
  width: inherit;
  background-color: #1d7bff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>

 出现这个问题的原因

原来我忘记了子组件设了绝对定位，但父组件没有设置相对定位。所以子组件脱离了父组件，导致子组件的百分之百直接和body的宽度一致了。而子组件虽然定位上脱离了文档流，但在节点树上他依然是父组件的儿子，所以如果设置width：inherit的时候，浏览器会将父组件的宽度赋值给他。

解决：

就是给子组件的宽度设置成width：inherit  或者给父组件设置position: relative

 

width设置成100%；

 

width设置成inherit

最后 

如果还有什么疑问或者建议，可以多多交流，文笔有限，才疏学浅，文中若有不正之处，万望告知。