排序可视化容器：如何将底部设为元素布局起点？

你的核心问题是：Grid布局的排序容器中，临时将两个元素放入同一个子div后，叠加高度撑大了容器；开启overflow: hidden后元素被向下挤压，溢出内容在Y轴负方向隐藏——本质是子div的高度自适应元素总和，导致Grid单元格被撑高，进而容器变形。

直接给你可行的解决方案：

调整容器与子项的布局规则 #

1. 保留容器的aspect-ratio并启用overflow: hidden，确保容器尺寸固定，溢出内容被截断。
2. 给每个Grid子项（包裹.sort-element的div）设置Flex布局，让内部元素从底部向上排列，同时强制子项占满Grid单元格的高度，避免子项因元素叠加被撑高。

修改后的完整CSS代码：

.sort-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
  gap: 2px;
  align-items: end; /* Grid中用end替代flex-end，语义更准确 */
  justify-content: space-between;
  width: 20%;
  aspect-ratio: 1 / 1;
  overflow: hidden; /* 开启溢出隐藏，截断超出单元格的内容 */
  padding: 5px;
  border: 1px solid black;
}

/* 让每个Grid子项占满单元格高度，内部元素从底部堆叠 */
.sort-container > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.sort-element {
  display: block;
  width: 100%;
  background-color: #707070;
  /* 可选：如果需要给叠加元素添加间距，取消下面的注释 */
  /* margin-top: 2px; */
}

原理说明 #

• 之前的overflow: hidden无效，是因为子div的高度会自适应内部两个元素的总高度，Grid单元格会跟着被撑高，容器自然也会变大。
• 修改后，每个子div被强制设为100%单元格高度，内部用Flex的justify-content: flex-end让元素从底部向上排列，叠加后超出单元格的部分会被容器的overflow: hidden截断，完全不会影响容器的整体尺寸。

HTML结构不需要改动，直接使用你原来的代码即可。

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