切换单个Flexbox容器时所有容器意外展开的问题求助

Flexbox容器默认的align-items: stretch属性是导致该问题的核心：当你使用display: flex创建容器时，所有flex子元素会被自动拉伸至与容器内最高子元素的高度一致。当你展开某个.snippet-box的折叠内容后，这个盒子的高度会随内容增加，其他没有展开内容的盒子也会被强制拉伸到相同高度，最终出现所有容器高度同步变化的现象。

只需添加一行CSS即可解决问题，有两种可选方案：

方案1：针对单个子项设置 #

给.snippet-box添加align-self: flex-start，让每个盒子仅根据自身内容高度调整，不受其他盒子影响：

.snippet-box {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    flex-basis: 290px;
    background-color: white;
    box-shadow: 0px 0px 20px rgba(128, 128, 128, 0.1);
    border-radius: 15px;
    box-sizing: border-box;
    align-self: flex-start; /* 新增属性 */
}

方案2：针对父容器全局设置 #

修改.snippet-box-container的align-items属性为flex-start，让所有子元素默认按自身内容高度排列：

.snippet-box-container {
    display: flex;
    justify-content: center;
    gap: 25px;
    width: 100%;
    padding: 0px 15px;
    align-items: flex-start; /* 新增属性 */
}

两种方案都能实现预期效果，选择哪种取决于你的整体布局需求——如果后续有其他子项需要保持拉伸，方案1更灵活；如果所有子项都不需要拉伸，方案2更简洁。

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