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)

鋼性鑄鐵

.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%;
    }

只有當(dāng)涉及到換行時(shí)，css屬性才會(huì)被忽略，文本會(huì)超出100%的可用空間

在頂部位置:鏈接 它似乎也在100%地考慮按鈕的額外高度:鏈接 另一個(gè)沒(méi)有包裝的似乎可以正確計(jì)算高度:鏈接 甚至連彈性啟動(dòng)都沒(méi)有得到尊重:鏈接

我已經(jīng)嘗試了所有的css屬性，想知道我遺漏了什么。 100%被正確評(píng)估，否則為什么包裝會(huì)破壞它？