如何让字体大小随父级div高度自适应（非窗口resize触发）

不需要复杂逻辑，优先用纯CSS就能实现需求，极端场景可以加几行JS兜底。 #

纯CSS实现（推荐） #

1. 修正Grid布局配置 #

你写的grid-template-rows: (auto 1fr);存在语法错误，要实现所有单词行自动等分固定高度父容器，替换成下面的配置即可，同时删掉之前加的overflow: scroll：

.user-word-list {
  /* 父级已经是固定屏幕高度，这里直接占满高度即可 */
  height: 100%;
  display: grid;
  /* 核心配置：自动生成行，所有行等分容器高度，不会溢出 */
  grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
  gap: 8px; /* 行间距按需调整 */
  padding: 12px;
}

2. 配置文本自适应缩放 #

给单词容器和文本加尺寸约束，让字体大小随容器高度自动适配，同时保证长单词不会溢出：

.user-word-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-word {
  margin: 0;
  white-space: nowrap;
  line-height: 1;
  /* 字体大小随容器高度动态变化，设置最小12px保证基础可读性 */
  font-size: clamp(12px, 7vh, 42px);
  overflow: hidden;
}

JS兜底方案（适配超长单词场景） #

如果存在长度特别夸张的单词，CSS相对单位可能没法同时适配宽高，加一段简单的尺寸监听逻辑即可，每次单词数量变化、容器尺寸变化时自动计算刚好放下所有内容的最大字号：

const wordListEl = document.querySelector('.user-word-list');
const GAP_SIZE = 8; // 和CSS里设置的gap值保持一致
const MIN_FONT_SIZE = 12;

// 自动计算适配字号的方法
function adjustFontSize() {
  const wordEls = wordListEl.querySelectorAll('.user-word');
  const wordCount = wordEls.length;
  // 计算单行可用高度
  const availableRowHeight = (wordListEl.clientHeight - (wordCount - 1) * GAP_SIZE) / wordCount;
  let baseFontSize = Math.max(MIN_FONT_SIZE, availableRowHeight - 2); // 留2px边距避免贴边

  wordEls.forEach(el => {
    el.style.fontSize = `${baseFontSize}px`;
    // 如果文本宽度超出容器，逐步缩小字号直到放下或者达到最小字号
    while (el.scrollWidth > el.clientWidth && parseFloat(el.style.fontSize) > MIN_FONT_SIZE) {
      el.style.fontSize = `${parseFloat(el.style.fontSize) - 1}px`;
    }
  });
}

// 监听容器尺寸变化，自动触发调整
new ResizeObserver(adjustFontSize).observe(wordListEl);
// 每次新增/删除单词后手动调用一次adjustFontSize()即可
adjustFontSize();

内容的提问来源于stack exchange，提问作者veloped