Have a div's font size as a percentage of that div's parent size-CodePudding

<div id = "parent" style = "width:100px; height:100px">
  <div id = "child" style = "width:20px; height:20px; font-size:1vw">
    Hello there
  </div>
</div>

My admittedly poor understanding of css is that font-size:1em, will size "hello there" according to a percentage of the element itself's width. "Child"'s width.

Assuming this is correct, is it somehow possible, by css only, to have "Child"'s content sized to a percentage of its parent element ("Parent") width instead?

CodePudding user response：

The font-size em unit is relative to the parent element's font size, not its width.

You cannot change font size relative to the parent element's width using css only. The closest option is to scale it relative to the viewport width using vw units.

CodePudding user response：

You can use % to change font size relative to parent element's font size. I don't think you can change fontsize relative to width of parent using css. If your parent is the body, then you can use vw.