Vue实现容器大小固定，文字大小根据文字多少而变化

<el-input v-model="phrase" @input=reduceFontSize />
<div
	class="phraseBox"
    :style="{ fontSize: phraseSize + 'px' }"
    ref="phraseBox">
    {{ phrase }}
</div>

.phraseBox {
  background-color: #fceab6;
  line-height: 26px;
  width: 300px;
}

const phraseBox = ref();
const phraseSize = ref(24);
const reduceFontSize = () => {
    queueMicrotask(() => {
    if (phraseSize.value === 12) return;
    if (phraseBox.value.offsetHeight <= 104) return;
    phraseSize.value--;
    reduceFontSize();
  });
};