CSS：位置固定宽度继承无效

Question

我想在固定的子元素navInner上使用父级navItems的宽度-但它不起作用。

这是我的代码：

*,
*::before,
*::after {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  background-color: black;
}

.container {
  display: flex;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
}

.page {
  width: 70%;
  padding: 4rem;
}

.navigation {
  width: 30%;
  background: #eee;
}

.nav-inner {
  position: sticky;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 100vh;
  align-self: flex-start;
}

.navItems {
  position: fixed;
  padding: 2rem;
  width: inherit
}

<div class="wrapper">
  <div class="container">
    <div class="page">
      <!-- Page Content -->
    </div>
    <div class="navigation">
      <div class="nav-inner">
        <div class="navItems">
          <!-- Navigation Items -->
        </div>
      </div>
    </div>
  </div>
</div>

当我将transform: translate3d(0, 0, 0)应用于类nav-inner时，width: inherit适用于navItems，但是position: fixed将不起作用。

我该如何解决？

注意：我需要使用百分比宽度值进行自适应设计。