使用 calc() 时，宽度继承不填充父级

Question

我正在尝试使 div 扩展到父级的宽度。父级上有一个calc()。为什么孩子不扩大到父母的宽度？如果我删除 calc 并设置一个实际值，它工作正常。有什么技巧可以让它发挥作用吗？

我假设孩子也在跑calc(100% - 200px)

* {
  box-sizing: border-box;
}

.wrapper {
  width: 75%;
  margin: auto;
  position: relative;
}

.nav {
  width: calc(30% - 16px);
  height: 2000px;
  position: relative;
  background: red;
}

.nav>ul {
  width: inherit;
  background: blue;
  position: fixed;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="nav">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

Answer 1

基于上面的cmets，我将进一步阐述。很明显，ul 从其父级继承了calc(30% - 16px)，两者的计算方式不同，这是逻辑：

nav 有一个静态位置，所以他的宽度是相对于它的容器的，这里是.wrapper，这个宽度是它的容器的 75%，它是 body，所以导航的最终宽度是 (width-body*0.75)*0.3 - 16px。

ul 有一个固定的位置，所以它的宽度是相对于寡妇/屏幕宽度的，并且由于 body 默认有 8px 边距，所以 body 的宽度与浏览器宽度略有不同，我们可以说 browser-width=width-body + 16px 和因此ul 的宽度是(width-body + 16px)*0.3 - 16px。

所以我们可以清楚的看到ul的宽度大于nav的宽度。

---

为了解决这个问题，我们需要解方程：

(width-body + 16px)*0.3 - 16px = (width-body*0.75)*0.3 - 16px

但这不是适当的解决方案，因为我们将以 唯一的负值 (-64px) 结束，这是不可能的！

另一个思路是调整固定元素的宽度。

让我们首先删除主体边距以使其更容易，我们将得到新的等式：

(width-body)*0.3 - 16px = (width-body*0.75)*0.3 - 16px

现在我们只是缺少0.75 因素，所以我们可以简单地添加它。

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 75%;
  margin: auto;
  position: relative;
}

.nav {
  width: calc(30% - 16px);
  height: 2000px;
  position: relative;
  background: red;
}

.nav>ul {
  width: calc((30% * 0.75) - 16px);
  background: blue;
  position: fixed;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="nav">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

---

顺便说一句，我怀疑您希望拥有与sticky 位置相同的行为，因此您可以尝试一下。只需关注browser support：

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 75%;
  margin: auto;
  position: relative;
}

.nav {
  width: calc(30% - 16px);
  height: 2000px;
  position: relative;
  background: red;
}

.nav>ul {
  background: blue;
  position: sticky;
  top:0;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="nav">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>