Как ребенок масштабирует размер шрифта в зависимости от родителя?

Question

РЕДАКТИРОВАТЬ: ДУМАЮ, ЧТО Я ПОЛУЧИЛ ЭТО С ИСПОЛЬЗОВАНИЕМ iFRAME: https://plnkr.co/edit/X2FQGzxjeDFiYHXlQFFg

iFRAME - это собственный порт

Я пытаюсь изменить размер шрифта внутри em в зависимости от размера его родительского li. Когда я пытаюсь vw это изменения в зависимости от размера окна браузера, а не в зависимости от размера родительского li. Родитель li является позиционным относительным, а дочерний em позиционным абсолютным. Я очень благодарен за помощь, которой вы могли бы поделиться.

<li style="width: 14.28%;
           padding: 7.18% 0;
           border: 1px solid #000;
           box-sizing: border-box;
           background-color: #fff;
           float: left;
           list-style: none;
           position: relative;
           display:block;">

    <em style="position: absolute;
               font-size: 2vw;
               font-weight: 700;
               text-align: center;
               width: 100%;
               line-height: 0%;">12</em>

</li>