collectionWrapper元素hover高度放大效果失效问题求助

要实现hover类名为collectionWrapper的元素时，元素高度增大的效果，编写对应CSS代码后，hover时元素并未按calc计算的高度展开；当子元素过多（总高度超过容器尺寸）时，hover无任何变化。

预期效果 #

• collectionWrapper元素hover时高度增加

实际结果 #

• 子元素过多（总高度超过容器尺寸）时，hover无任何变化

相关代码 #

HTML

<div class="selectorBody flex row">
  <div class="selectorScroller">
    <div class="selectorList flex column" id="selectorList">
      <div class="collectionWrapper quaternaryColor"><p>Something here</p></div>
      <div class="collectionWrapper quaternaryColor"><p>Something here</p></div>
      <div class="collectionWrapper quaternaryColor"><p>Something here</p></div>
      <!-- 此处省略大量同类子元素 -->
      <div class="collectionWrapper quaternaryColor"><p>Something here</p></div>
      <div class="collectionWrapper quaternaryColor"><p>Something here</p></div>
      <div class="collectionWrapper quaternaryColor"><p>Something here</p></div>
    </div>
  </div>
</div>

CSS

.selectorScroller {
  overflow-y: hidden;
  width: 50%;
  height: 100%;
}
.selectorList {
  width: calc(100% - 8px);
  height: calc(100%);
  overflow-y: scroll;
}
.selectorList::-webkit-scrollbar {
  width: 5px;
}
.selectorList::-webkit-scrollbar-track {
  background: invisible;
  width: 5px;
}
.selectorList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
}
.selectorList:hover::-webkit-scrollbar-thumb {
  background: white;
}
.collectionWrapper {
  border-radius: 4px;
  min-height: 3rem;
  height: 3rem;
  margin: 0px 5px 4px 4px;
  transition: height .3s ease-in-out;
  display: flex;
  align-items: flex-end;
}
.collectionWrapper:hover {
  height: calc(calc(100vw - 1.6rem - 40px) / 5);
}
.collectionWrapper:first-child {
  margin: 4px;
} 
.selectorBody {
  width: calc(100% - 16px);
  height: calc(100% - 62px);
  max-height: calc(100% - 62px);
}

注：flex和quaternaryColor为自定义简写样式，分别表示flex布局和颜色样式

问题原因 #

1. .selectorList设置了固定height: 100%和overflow-y: scroll，当子元素总高度超过容器时，父容器高度被固定，hover子元素时，子元素高度增加的部分会被滚动容器裁剪隐藏。
2. .selectorScroller设置了overflow-y: hidden，进一步限制了内部元素的溢出显示。

解决方案 #

方案1：让容器自适应子元素高度变化

修改.selectorScroller和.selectorList的高度与溢出设置，允许容器适应子元素高度变化：

.selectorScroller {
  overflow-y: auto; /* 按需显示滚动条 */
  width: 50%;
  min-height: calc(100% - 62px); /* 保留最小高度，避免容器塌陷 */
}
.selectorList {
  width: calc(100% - 8px);
  min-height: 100%; /* 改用min-height，允许高度超过父容器 */
}

方案2：临时禁用滚动裁剪（适合保留固定容器高度场景）

如果需要保留固定高度的滚动容器，可在hover时临时调整溢出设置，让子元素能完整展开：

.selectorScroller {
  overflow-y: visible; /* 取消hidden限制 */
}
.selectorList:hover {
  overflow-y: visible; /* hover时禁用滚动裁剪 */
}

注意：此方案可能导致页面布局偏移，需根据实际场景调整

方案3：优化hover高度计算，避免溢出容器

如果希望hover高度增加但不超出可视容器，可修改为基于容器高度的计算：

.collectionWrapper:hover {
  height: calc(100% - 1rem); /* 基于父容器高度计算，适配容器尺寸 */
}

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