Accordion组件点击时联动展开问题求助

点击单个手风琴面板时，旁边的面板也会呈现“展开”状态，这并非JavaScript逻辑错误，而是flex布局的默认拉伸行为导致的视觉错觉：

flex容器.accordion-wrapper默认的align-items: stretch属性会让所有子元素（.accordion-card）的高度自动拉伸到容器内最高元素的高度。当某一个面板展开后，对应卡片高度增加，其他卡片也会被强制拉伸至相同高度，看起来像是同步展开了，但实际上其他面板的.accordion-body依然处于max-height: 0的隐藏状态。

修复方案 #

给.accordion-card添加align-self: flex-start属性，让每个卡片的高度由自身内容决定，不会被flex容器强制拉伸：

.accordion-card {
  background-color: rgba(182, 210, 253, 0.041);
  border-radius: 10px;
  width: 30vw;
  max-width: 385px;
  min-width: 350px;
  border: 1px solid rgba(153, 196, 239, 0.121);
  position: relative;
  /* 添加这一行 */
  align-self: flex-start;
}

验证效果 #

修改后，每个手风琴面板的高度独立由自身内容控制：

• 未展开的面板保持收缩状态的高度
• 点击展开的面板会单独增高，其他面板不受影响，完全符合独立展开的预期效果。

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