根据容器的高度和宽度动态调整字体大小

Question

我有一个表，该表的大小在固定容器内动态变化，如下所示：

我在每个单元格中添加“ X”或“ O”。 我想要实现的是在每个单元格内没有固定的字体大小。字体大小应根据单元格的高度和宽度动态变化。我该怎么办？

为更好地说明，请参见以下图片：

我的CSS：

* {
margin: 0;
box-sizing: border-box;
padding: 0;
}

td {
border: 2px solid #333;
text-align: center;
vertical-align: middle;
font-family: "Comic Sans MS", sans-serif;
font-size: 16px;
font-size: 3.75vw;
cursor: pointer;
}

table {
table-layout: fixed;
border-collapse: collapse;
height: 100%;
width: 100%;
}

.tableWrapper {
width: 600px;
height: 600px;
}

table tr:first-child td {
border-top: 0;
}

table tr:last-child td {
border-bottom: 0;
}

table tr td:first-child {
border-left: 0;
}

table tr td:last-child {
border-right: 0;
}

.winner {
background-color: forestgreen;
}

.tie {
background-color: grey;
}

.endgame {
display: none;
width: 350px;
top: 120px;
background-color: rgba(205, 133, 63, 0.8);
position: absolute;
top: 38%;
left: 46%;
margin-left: -151px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
border-radius: 5px;
color: white;
font-size: 2em;
}  

HTML ：

<div class="tableWrapper">
<table>
    <tr *ngFor="let row of boardConfig">
        <td *ngFor="let cell of row" class="cell" [attr.id]="cell"></td>
    </tr>
</table>
<div class="endgame">
    <div class="text"></div>
</div>