Font-Size Responsive to DIV Size - html

Question

I'm creating a page where I have some elements and they could be hidden or not. I'd like to know if it's possible to adjust my font-size according to my div?
For example, when I have 2 elements shown, I'd like my text to be bigger than when I have 5, so this way my text would fit better the space.
My JavaScript Code, which define if the element will be hidden or not.
var val_kpi = $("#t3_teste_B_kpi").text();
var val_kpi_clean = Number(val_kpi.replace(/[^0-9.-]+/g,""));
if (val_kpi_clean != null && val_kpi_clean != 0){
$("#t3_teste_B").css("display", "");
}else{
$("#t3_teste_B").css("display", "none");
}
.tier3_test{
width:50%;
min-height: 100px;
height: auto;
margin-right: 2.5px ;
/*Configurações Visuais */
background: #FFF;
/*Configurações da Borda */
border: 5px solid;
border-image-slice: 1;
/* border-radius: 30px 30px 30px 30px; */
border-image-source: linear-gradient(to left, #2B6640, #66B512);
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.tier3_in{
margin: 10px 5px 10px 5px;
width:100%;
}
.kpititle3{
font-weight: bold;
color: #000;
font-size: calc(8px + (12 - 8) * ((100vw - 300px) / (1600 - 300)));
}
.kpitext3 {
font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
font-weight: bold;
}
.no-wrap{
white-space: nowrap;
}
<div class="tier3_test flex-center">
<div class="tier3_in" id="t3_teste_A">
<span class="kpititle3">A</span>
<p><span class="kpitext3" id="t3_teste_A_kpi">VALOR 1</span></p>
</div>
<div class="tier3_in" id="t3_teste_B">
<span class="kpititle3">B</span>
<p><span class="kpitext3" id="t3_teste_B_kpi">VALOR 2</span></p>
</div>
<div class="tier3_in" id="t3_teste_C">
<span class="kpititle3">C</span>
<p><span class="kpitext3" id="t3_teste_C_kpi">VALOR 3</span></p>
</div>
<div class="tier3_in" id="t3_teste_D">
<span class="kpititle3">D</span>
<p><span class="kpitext3" id="t3_teste_D_kpi">VALOR 4</span></p>
</div>
<div class="tier3_in" id="t3_teste_E">
<span class="kpititle3">E</span>
<p><span class="kpitext3" id="t3_teste_E_kpi">VALOR 5</span></p>
</div>
</div>
The Result I Have:
The Result I'd like to have:

Answer 1

There is no way to do this using simple CSS.
Chris Coyier over at CSS-Tricks explains the best solutions, and all use javascript. However, there is no point figuring it out yourself - Coyier discusses a few already-written libraries that do the job for you.
Below is an example using your code and the first such library: Dave Rupert’s FitText library. Click the button to see what happens when three divs are removed.
jsFiddle Demo (StackSnippets not working at the moment)
var grow_factor = $('.tier3_in').length / 2;
$('.tier3_test').fitText( grow_factor );
/* Below is just to remove divs for demo... */
$('button').click(function(){
$('#t3_teste_C, #t3_teste_D, #t3_teste_E').remove();
var grow_factor = $('.tier3_in').length / 2;
$('.tier3_test').fitText( grow_factor );
});
.tier3_test{
width:50%;
min-height: 100px;
height: auto;
margin-right: 2.5px ;
/*Configurações Visuais */
background: #FFF;
/*Configurações da Borda */
border: 5px solid;
border-image-slice: 1;
/* border-radius: 30px 30px 30px 30px; */
border-image-source: linear-gradient(to left, #2B6640, #66B512);
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.tier3_in{
margin: 10px 5px 10px 5px;
width:100%;
}
.kpititle3{
font-weight: bold;
color: #000;
}
.no-wrap{
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.fittext.js"></script>
<div class="tier3_test flex-center">
<div class="tier3_in" id="t3_teste_A">
<span class="kpititle3">A</span>
<p><span class="kpitext3" id="t3_teste_A_kpi">VALOR 1</span></p>
</div>
<div class="tier3_in" id="t3_teste_B">
<span class="kpititle3">B</span>
<p><span class="kpitext3" id="t3_teste_B_kpi">VALOR 2</span></p>
</div>
<div class="tier3_in" id="t3_teste_C">
<span class="kpititle3">C</span>
<p><span class="kpitext3" id="t3_teste_C_kpi">VALOR 3</span></p>
</div>
<div class="tier3_in" id="t3_teste_D">
<span class="kpititle3">D</span>
<p><span class="kpitext3" id="t3_teste_D_kpi">VALOR 4</span></p>
</div>
<div class="tier3_in" id="t3_teste_E">
<span class="kpititle3">E</span>
<p><span class="kpitext3" id="t3_teste_E_kpi">VALOR 5</span></p>
</div>
</div>
<button>Remove 3 Divs</button>

Answer 2

In your javascript, simply add / remove one of two extra-classes (.big-font and .small-font)to your wrapper div (.tier-3-test) in function of if its elements are removed or not. In your css, you then define a font-size for extra class 1 which is added if the wrapper div contains all 5, and another font-size for extra class 2 which is added if the wrapper div contains less divs, more or less like so:
.big-font {
font-size: 30px;
}
.small-font {
font-size: 20px;
}