title: How do you reset a relative font-size to not inherit font-size from the html element?
body: <p>Let's say that you have:</p>
  <ul>
  <li>an <code>html</code> element styled like StackOverflow styles its <code>html</code>, using <code>var</code> and <code>--fs-base</code> to clamp <code>font-size</code></li>
  <li>a &quot;parent&quot; <code>div</code> inside the <code>html</code> with a <code>font-size</code> of <code>16px</code></li>
  <li>a &quot;child&quot; <code>div</code> inside the &quot;parent&quot; <code>div</code> with a relative <code>font-size</code> of <code>1rem</code></li>
  <li>elements inside the child <code>div</code>, in this example <code>p</code>, also using relative <code>font-size</code>, but with <code>0.75rem</code></li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    --fs-base: 13px;
    font-size: var(--fs-base);
  }
  
  .parent {
    font-size: 16px;
  }
  
  .child {
    font-size: 1rem;
  }
  
  p {
    font-size: 0.75rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;div class="child"&gt;
      &lt;p&gt;Text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you run this code snippet and inspect it, you'll see the computed <code>font-size</code>:</p>
  <ul>
  <li><code>html</code> - <code>13px</code></li>
  <li><code>div.parent</code> - <code>16px</code></li>
  <li><code>div.child</code> - <code>13px</code> (but I want <code>16px</code>)</li>
  <li><code>p</code> - <code>9.75px</code> (but I want <code>12px</code>)</li>
  </ul>
  <p>As you can see, the computed values are different than what I actually want. Unfortunately, just doing <code>.parent * { font-size: 16px; }</code> won't fix this issue, and I'm running out of ideas.</p>
  <p>How can you still use a relative <code>font-size</code> in <code>div.child</code> while ensuring that it inherits the base reset <code>font-size: 16px</code> declared in <code>div.parent</code>?</p>