<div>
    I am nested with 1rem but its 20px always
    <div>
      I am nested with 1rem but its 20px always
      <div>
        I am nested with 1rem but its 20px always
        <div>
          I am nested with 1rem but its 20px always
          <div>
            I am nested with 1rem but its 20px always
          </div>
        </div>
      </div>
    </div>
  </div>
<hr />
<div id="width"></div>
html { font-size:20px; } 
div { font-size:1rem; }
div#width{width:25rem; border: 1px solid #333;}
const getFontSize = (selector) => window.getComputedStyle(document.querySelector(selector)).fontSize

document.getElementById("width").innerHTML = `Width: HTML fontSize X nREM i.e: ${getFontSize("html")} X 25rem = ${document.getElementById("width").offsetWidth}px`;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.