html - 位置固定为父容器宽度

Question

我正在尝试制作一个适合它的父容器的固定标题。

.body {
  display: flex;
  width: 100wp;
  height: 700px;
  border: 1px red solid;
 padding-left: 0px;
  padding-right: 80px;
}

.sticky {
  border: 1px blue solid;
  position: fixed;
  width: 100%;
  height: 30px;
}

<div class="body">
  <div class="sticky">
  
  </div>
</div>

它从容器中流出。所以我尝试了继承属性：

.body {
  display: flex;
  width: 100wp;
  height: 700px;
  border: 1px red solid;
 padding-left: 0px;
  padding-right: 80px;
}

.sticky {
  border: 1px blue solid;
  position: fixed;
  width: inherit;
  height: 30px;
}

<div class="body">
  <div class="sticky">
  
  </div>
</div>

而且也不合适...

继承属性不能与百分比父宽度一起使用吗？如果是，如何管理？

标签： htmlcss