Scaling a single character font to its parent div

Question

I am trying to fit a single character font-size to its parent div. is it possible?

Maybe it's a Font scaling based on width of container by @Francesca duplicate?

But my context is a Single Character so maybe it is possible but font can be normal font-family or iconic font like font-awesome.

I appreciate a fiddle work

body {
  font-size: 10px;
  font-family: Arial
}

.box1 {
  border: 1px solid red;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 4vw;
}

.box2 {
  border: 1px solid blue;
  margin: 10px;
  width: 200px;
  height: 200px;
  font-size: calc(3vw + 3vh);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>

Answer 1

I have try it with some js code but its depend on parents width or height.

 var fontSize = parseInt($(".box1").height())+"px";
 $(".box1").css('font-size', fontSize);
 
  var fontSize = parseInt($(".box2").height())+"px";
 $(".box2").css('font-size', fontSize);

body {
  font-size: 10px;
  font-family: Arial
}

.box1 {
  border: 1px solid red;
  margin: 10px;
  width: 50px;
  height: 50px;  
  text-align:center;
  line-height: 45px;
}

.box2 {
  border: 1px solid blue;
  margin: 10px;
  width: 200px;
  height: 200px; 
  text-align:center;  
}
.box2 i {
  display: block;
  line-height: 97%;
  vertical-align: middle;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box1">x</div>
<button class="box1">x</button>
<div class="box2"><i class="fa fa-remove"></i></div>
<button class="box2"><i class="fa fa-remove"></i></button>