How to make font-size relative to parent div?

Question

I want text inside my div to remain same size in % percentage ratio to a parent div. I.E. I want my text to have font-size of 50% of parents div width. So when page size is changing, text always remains the same size in %.

Here Is what I'm talking about:

.counter-holder{
	display: block;
	position: absolute;
	width:90%;
	height:20%;
	top: 70%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
}


.counter-element-box{
	position:relative;
	vertical-align: text-top;
	border-style: solid;
    border-width: 1px;
    width: 20%;
    height: 100%;
    float:left;
    margin: 6%;
}

.counter-element-text{
	position:absolute; 
	top:50%; 
	width: 50%;
	max-width:50%;
	display: inline-block;
	height:100%;
	margin-left:50%;
	font-size : 80%;overflow: hidden;
}

.counter-element-value{
	position:absolute; 
	top:50%; 
	width: 50%;
	max-width:50%;
	display: inline-block;
	height:100%;
	padding-left:30%;
	font-size : 80%;overflow: hidden;
}

<div class="counter-holder">
	<div class="counter-element-box">
		<div id="years" class="counter-element-value">
			0
		</div>
		<div class="counter-text counter-element-text" >
		    Years
		</div> 
	</div>
	<div class="counter-element-box">
		<div id="missions" class="counter-element-value">
			0  
		</div>
		<div class="counter-text counter-element-text" >
		    Missions
		</div>
	</div> 
	<div class="counter-element-box">	
		  <div id="team" class="counter-element-value">
			   0 
		  </div>
		  <div class="counter-text counter-element-text" >
		    	Team
		  </div>
	</div>		    	
</div>

Run this snippet in full screen and try resizing the page and see how text size is changing and not fitting inside the div borders. How can I prevent it from happening, so it always remains inside the borders?

Answer 1

You can use container query units: cqw, cqh, cqi, cqb, cqmin, cqmax. They are supported by all modern browsers.

This will allow to adjust font-size and other properties not only to the direct parent, but to any ancestor defined as a container, as well as target not only horizontal but also vertical size of the container if necessary.

.container {
  /* Define a container */
  /* Use `inline-size` instead of `size` if you are only
     interested in inline size, which is horizontal
     for Latin and many other layouts. */
  container-type: size;
  
  /* Other styles */
  height: 3em;
  border: solid 2px;
  overflow: hidden;
}

.horizontal {
  resize: horizontal;
}

.vertical {
  resize: vertical;
}

.both {
  resize: both;
}

.horizontal .child {
  font-size: 10cqw;
}

.vertical .child {
  font-size: 30cqh;
}

.both .child {
  font-size: 30cqmin;
}

<div class="container horizontal">
  <div class="child">Resize me horizontally!</div>
</div>

<div class="container vertical">
  <div class="child">Resize<br>me<br>vertically!</div>
</div>

<div class="container both">
  <div class="child">Resize me<br>in all<br>ways!</div>
</div>