设置max-height与自动换行后div仍溢出的问题排查

使用Pug编写HTML结构并搭配CSS实现Flex布局时，遇到以下问题：仅当文本触发自动换行时，CSS属性未正确生效——文本超出应有的100%可用空间；高度计算错误包含了.actionButtons的额外高度；flex-start对齐规则失效。无换行时所有表现正常，需定位问题根源并解决换行导致的容器溢出及高度异常问题。

相关代码 #

HTML (Pug) #

div.result
    div.imageSidebar
        div.actionButtons
            button.hideSimilarButton ⛔
            button.showAtActualScaleButton(onclick=`showAtActualScale(${index})`) ⭕
        div.infoDiv
            - let similarImageLink = encodeURIComponent(imageName.replace(/\.[^/.]+$/, "").replace(/\d+$/, "").replace(/\(\d*\)|\d+$/g, "").trim())
            a.imageTitle(href='/search?searchText='+similarImageLink)
                | #{imageName} 
            - let folderlink = encodeURIComponent(folderName)
            a.subTitle(href='/search?searchText='+folderlink)
                |#{folderName}
    div.mainContent.scrollbarVisible
        - let imageLinkEscaped = encodeURIComponent(imagePath)
        a#contentLink(href='/?imageBackLink=' + imageLinkEscaped)
            if (imagePath.endsWith('.mp4') || imagePath.endsWith('.webm') || imagePath.endsWith('.mkv'))
                video.searchVid.resultFile(id='image'+index,src=imageLinkEscaped controls loop)
            else
                img.searchImg.resultFile(id='image'+index,src=imageLinkEscaped)

CSS #

.results {
    display: flex;
    flex-grow: 1;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    height: 100%;
}

.result {
    display: flex;
    flex-direction: row;
}

.imageSidebar {
    display: flex;
    flex-direction: column;
    margin: 0;
    align-items: flex-start;
    height: 100%;
}

.actionButtons {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}

.actionButtons > * {
    padding: 0;
    font-size: 22px;
    width: 40px;
    height: 40px;
    background-color: black;
    border: solid;
    border-color: gray;
    border-width: 1px;
    border-radius: 5px;
    margin: 0px 2.5px;
    margin-bottom: 10px;
}

.infoDiv {
    display: flex;
    flex-grow: 1;
    align-content: flex-start;
    height: 100%;
    max-height: 100%;
    word-wrap: break-word;
    word-break: break-word;
}

.imageTitle,
.subTitle {
    margin: 0;
    padding: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* max-height: 100%; */
    align-self: flex-start;
    /* text-align: right; */
    width: fit-content;
}

.imageTitle {
    color: white;
    font-weight: bold;
    font-size: 35px;
}

.subTitle {
    color: gray;
    font-size: 25px;
}   

.mainContent {
    display: flex;
    align-content: flex-start;
    height: 100%;
}

.resultFile {
    padding: 0;
    margin: 0;
    /* remove below line to disable upscaling of small images */
    min-height: auto;
    max-height: 100%;
}

问题表现 #

• 文本换行时超出可用空间：文本溢出截图
• 高度计算包含按钮额外高度：高度异常截图
• 无换行时高度计算正常：正常高度截图
• flex-start对齐失效：对齐失效截图

问题根源 #

1. 高度约束失效：.imageSidebar作为Flex容器，默认不会收缩至小于内容高度，height:100%无法强制约束；.infoDiv的height:100%未扣除.actionButtons的固定高度，导致内容撑开容器。
2. 垂直文本尺寸异常：writing-mode: vertical-rl结合旋转后，width: fit-content在换行时无法正确限制宽度，align-self: flex-start因容器高度被内容撑开而失去作用。

修复代码调整 #

/* 修正Flex容器高度约束，允许容器收缩 */
.imageSidebar {
    display: flex;
    flex-direction: column;
    margin: 0;
    align-items: flex-start;
    height: 100%;
    min-height: 0; /* 关键：解除Flex容器的最小高度限制 */
}

/* 重新计算.infoDiv可用高度，扣除按钮区域高度 */
.infoDiv {
    display: flex;
    flex-grow: 1;
    align-content: flex-start;
    height: calc(100% - 50px); /* 50px = 按钮高度40px + 底部margin10px */
    max-height: calc(100% - 50px);
    word-wrap: break-word;
    word-break: break-word;
    overflow: hidden; /* 防止内容溢出容器 */
}

/* 约束垂直文本高度，确保不超出容器 */
.imageTitle,
.subTitle {
    margin: 0;
    padding: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 100%; /* 限制文本高度不超过.infoDiv */
    align-self: flex-start;
    width: fit-content;
    overflow: hidden;
    text-overflow: ellipsis; /* 可选：溢出时显示省略号 */
}

/* 确保.result容器严格继承父元素高度 */
.result {
    display: flex;
    flex-direction: row;
    height: 100%; /* 新增：让.result与父容器高度保持一致 */
}

注意事项 #

• 若.actionButtons的高度或边距有调整，需同步修改calc(100% - 50px)中的数值。
• 如需文本完全换行而非截断，可移除text-overflow: ellipsis，但需保留overflow: hidden避免撑开容器。

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