如何使用CSS实现div底部对齐，内容增长时向上扩展不溢出？

可以实现，无需使用auto-fit/auto-fill属性，仅调整网格项对齐规则和网格区域设置即可达到效果。

你当前遇到溢出问题的原因是：.one固定占用了第3到第4行的网格区域，网格项默认是顶部对齐，内容超出区域高度时就会向下溢出。

修改方案如下：
仅需要给.one添加align-self: end规则，同时调整它的网格行起始值，给向上扩展留出空间即可：

.abc{
  display:grid;
  grid-template-columns: repeat(12,6.697%);
  grid-template-rows: 18px repeat(4, 1fr);
  border:1px solid green;
  height:320px
}
.one{
  grid-column: 2/5;
  /* 结束行固定为5，保证底部锚点位置不变，起始行改为2预留向上扩展空间 */
  grid-row: 2/5;
  border:1px solid;
  /* 核心规则：让网格项在分配的区域内底部对齐 */
  align-self: end;
  /* 可选：内容超过最大可用高度时开启滚动，避免溢出父容器 */
  overflow-y: auto;
}
.two {
  grid-row: 1/5;
  border:1px solid #ee0;
}

原HTML代码无需改动。

补充说明：

• minmax可以配合使用，如果你需要限制扩展的最大/最小高度，可将grid-template-rows对应行的高度规则替换为minmax(最小高度, 最大高度)的写法
• auto-fit和auto-fill是用于动态生成网格列/行数量的属性，你当前场景列数固定为12列，不需要使用这两个属性

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