Html 调整flex box内部div中的内容大小会将其他内容推到flex box外部

作为HTML5/CSS3应用程序的一部分，我需要实现可缩放的图像弹出窗口。当用户点击一个小的图像时，全屏弹出出现在中间，上面有一个标题，还有一个按钮，关闭它下面的弹出窗口。点击图像，然后删除任何缩放，并将其全尺寸在中间的框内，允许滚动-标题和“关闭”按钮停留在上方和下方。

我使用flex（有几个原因，包括垂直居中内容）。整个弹出窗口工作正常，看起来不错。单击图像确实会增加其大小，但会调整框的大小，以便在整个弹出窗口下方按下“完成”按钮

这是我的建议

我不介意框的大小调整-查看/滚动较大图像的空间越大-但我需要确保底部的按钮相对于弹出窗口的底部边缘保持在原位

我的HTML如下所示（我使用随机图像进行演示）：

不幸的是，有很多CSS。您会注意到，flex和老式定位的组合非常糟糕。这是因为该应用程序最初根本没有使用flex，而我现在正处于缓慢的迁移/清理过程中

div#overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 104;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#overlay > div {
    position: relative;
    width: calc(100% - 40px);
    margin: 10px auto;
    background-color: #A9A9A9;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
div#alsg {
    max-height: calc(100% - 40px) !important;
}

div#overlay div.intro {
    color: #FFF !important;
    font-size: 12pt;
    margin-bottom: 10px;
}

div#overlay div.box, div.template div.box {
    padding: 3px 5px;
    overflow: hidden;
    font-weight: bold;
    position: relative;
    flex-grow: 1;
}
div#alsg div.box {
    text-align: center;
    position: relative;
    overflow: auto !important;
    margin: 10px 0px 0px !important;
}
div.box {
    background-color: #FFF;
    color: #27374A;
    border-radius: 8px;
    border: 3px solid #FBE96E;
    position: relative;
    margin: auto;
    flex-shrink: 1;
}

.fit {
    max-width: calc(100% - 4px) !important;
    max-height: calc(100% - 4px) !important;
}

div.popup-buttons {
    margin-top: 10px;
}

#overlay .button.right {
    margin-left: 10px;
}
#button-alsg-done {
    margin-top: 10px;
    flex-basis: 25px;
}
div.button-green {
    background-color: #2CC55D;
    color: #FFF;
    font-weight: bold;
}
div.button-state-action {
    height: 25px;
    padding: 0px 5px;
    line-height: 25px;
    text-align: center;
    border-radius: 4px;
    font-size: 10pt;
    font-weight: normal !important;
    width: 60px;
    cursor: pointer;
    margin-bottom: 5px;
}
div.button {
    height: 22px;
    padding: 0px 2px;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
    font-size: 9pt;
    width: 42px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.right {
    float: right;
}

.clear {
    clear: both;
}

$('img', '#alsg').on('click', function(e) {
    $(this).toggleClass('fit');
});

div#overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 104;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#overlay > div {
    position: relative;
    width: calc(100% - 40px);
    margin: 10px auto;
    background-color: #A9A9A9;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
div#alsg {
    max-height: calc(100% - 40px) !important;
}

div#overlay div.intro {
    color: #FFF !important;
    font-size: 12pt;
    margin-bottom: 10px;
}

div#overlay div.box, div.template div.box {
    padding: 3px 5px;
    overflow: hidden;
    font-weight: bold;
    position: relative;
    flex-grow: 1;
}
div#alsg div.box {
    text-align: center;
    position: relative;
    overflow: auto !important;
    margin: 10px 0px 0px !important;
}
div.box {
    background-color: #FFF;
    color: #27374A;
    border-radius: 8px;
    border: 3px solid #FBE96E;
    position: relative;
    margin: auto;
    flex-shrink: 1;
}

.fit {
    max-width: calc(100% - 4px) !important;
    max-height: calc(100% - 4px) !important;
}

div.popup-buttons {
    margin-top: 10px;
}

#overlay .button.right {
    margin-left: 10px;
}
#button-alsg-done {
    margin-top: 10px;
    flex-basis: 25px;
}
div.button-green {
    background-color: #2CC55D;
    color: #FFF;
    font-weight: bold;
}
div.button-state-action {
    height: 25px;
    padding: 0px 5px;
    line-height: 25px;
    text-align: center;
    border-radius: 4px;
    font-size: 10pt;
    font-weight: normal !important;
    width: 60px;
    cursor: pointer;
    margin-bottom: 5px;
}
div.button {
    height: 22px;
    padding: 0px 2px;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
    font-size: 9pt;
    width: 42px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.right {
    float: right;
}

.clear {
    clear: both;
}