Bootstrap 5模态框缩略图过多高度溢出，如何添加纵向滚动条？

问题根源 #

当前模态框会被缩略图撑开超出视口，核心原因是**.modal-body没有明确的高度约束**，导致内部的.ce_jiseminarheader_modalvideowrapper设置的height:100%没有有效参照，进而缩略图容器的max-height:100%无法生效，最终模态框随内容无限扩展。

解决方案 #

通过给模态框的核心容器添加flex布局和高度约束，让缩略图容器的滚动设置生效：

1. 给.modal-content设置基于视口的最大高度，并启用flex垂直布局，让内部元素自动分配空间
2. 通过flex:1让.modal-body占据关闭按钮之外的所有空间，同时隐藏溢出内容
3. 保留缩略图容器的overflow-y:auto和max-height:100%设置，此时该高度会基于父容器的有效高度生效

修改后的完整CSS代码 #

/* 新增模态框内容容器的flex布局与高度限制 */
.ce_jiseminarheader_videomodal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* 可根据需求调整，比如85vh */
    overflow: hidden;
}

/* 调整modal-body，使其填充剩余空间 */
.ce_jiseminarheader_videomodal .modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0; /* 保持原有内边距设置 */
}

/* 保留原有布局样式 */
.ce_jiseminarheader_modalvideowrapper {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 0.5rem;
    align-items: stretch;
    flex-wrap: nowrap;
    height: 100%;
    overflow: hidden;
}

.ce_jiseminarheader_videothumbs {
    flex: 0 0 14rem;
    max-width: 14rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--ji-anthracite);
    transition: all 0.3s ease;
    border: 0.125rem solid transparent;
    padding: 0.75rem 0.5rem;
    gap: 0.75rem;
}

.ce_jiseminarheader_videothumbs .ce_jiseminarheader_videothumbsmall {
    border: 0.125rem solid transparent;
    transition: all 0.3s ease-in-out;
    border-radius: 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
}

.ce_jiseminarheader_videomain {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ce_jiseminarheader_modalvideoiframe {
    width: 100%;
    height: 100%;
    border: none;
}

效果说明 #

• 模态框最大高度限制在视口的90%，不会超出屏幕范围
• 左侧视频区域保持16:9比例，自适应模态框高度
• 右侧缩略图列表在内容过多时自动出现垂直滚动条，不会撑开模态框
• 关闭按钮始终固定在模态框顶部，不会被滚动内容遮挡

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