Как создать динамический размер шрифта на размер родительского элемента?

Question

Вот мой код:

ul { 
 
    list-style-type: none; 
 
    white-space:nowrap; 
 
} 
 

 
li { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
    display:inline-block; 
 
    width:50px; 
 
    height: 20px; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>

Я не ставил font-size собственности на него. Теперь я хочу знать, могу ли я установить динамический font-size? Я имею в виду, я хочу больше font-size для этого:

ul { 
 
    list-style-type: none; 
 
    white-space:nowrap; 
 
} 
 

 
li { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
    display:inline-block; 
 
    width:90px; 
 
    height: 25px; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>

Из-за больше как width и height для <li> во втором фрагменте кода. Делает это возможно?

Answer 1

Как насчет использования vw? См скрипку и изменить размер окна https://jsfiddle.net/d456eLwt/

ul { 
 
    list-style-type: none; 
 
    white-space:nowrap; 
 
} 
 

 
li { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
    display:inline-block; 
 
    width: 20vw; 
 
    font-size: 5vw; 
 
    line-height: 5vw; 
 
    height: 5vw; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ul>