如何实现购物车Div达到最大高度后才显示垂直滚动条？

问题分析 #

你遇到的核心矛盾是：给#cart_itself直接设置overflow-y: auto时，因它采用display: grid布局，网格容器的高度计算逻辑会与溢出属性冲突，导致容器塌陷；不设置溢出的话，内容又会超出max-height限制。

解决方案 #

不要给整个购物车容器加滚动，而是把滚动区域限定在动态添加内容的表格部分。这样既可以让顶部标题和底部总价固定显示，又能让表格内容在超过高度时滚动，同时容器可以正常自适应到max-height后停止扩展。

具体CSS调整如下：

#cart_itself {
  display: grid;
  max-height: 300px;
  /* 给网格布局分配行空间：顶部标题区自动高度，表格区占满剩余空间，底部总价区自动高度 */
  grid-template-rows: auto 1fr auto;
  gap: 12px; /* 可选，调整元素间间距 */
}

/* 给表格设置滚动属性，需先转为块级元素才能触发溢出 */
#cart_itself table {
  overflow-y: auto;
  display: block;
  /* 可选：限制表格最大高度，确保整体容器不超300px */
  max-height: 220px;
}

/* 可选：修复表格滚动时的列对齐问题 */
#cart_itself table thead,
#cart_itself table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

为什么这样有效？ #

1. grid-template-rows: auto 1fr auto 明确了网格行的分配逻辑，让表格区域自动填充容器剩余空间，不会出现高度计算异常。
2. 仅给表格添加overflow-y: auto，不会干扰整个容器的高度自适应逻辑，容器可以正常扩展到max-height:300px，之后表格内部触发滚动。
3. 表格默认是display:table，不响应overflow属性，转为block后才能正确启用滚动功能。

备选方案（若需整个容器滚动） #

如果不需要标题和总价固定，非要让整个购物车容器滚动，可给#cart_itself添加min-height并设置网格内容对齐方式，避免塌陷：

#cart_itself {
  display: grid;
  max-height: 300px;
  min-height: 160px;
  overflow-y: auto;
  align-content: start; /* 让网格内容从顶部开始排列，避免塌陷 */
}

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