Как предотвратить перекрытие между абсолютно позиционированной нижней частью и прокручиваемым содержимым в диалоговом ок ⇐ CSS

[Anonymous]

Я работаю над приложением Vue, в котором использую диалог (el-dialog из Element Plus) для отображения формы. Форма состоит из двух основных разделов:
Прокручиваемый контент вверху (UnitConversion и другие поля).
Нижний раздел (StockImageUpload, StockPricing и StockDescription), который всегда должен оставаться фиксированным. в нижней части диалогового окна.
Я использовал положение: абсолютное, чтобы сохранить фиксированную нижнюю часть внизу диалогового окна. Однако когда размер диалогового окна уменьшается (например, из-за меньшего размера экрана или окна), нижняя часть перекрывается прокручиваемым содержимым, скрывая кнопки и другие поля.
Вот упрощенный вариант версия моих компонентов:
Компонент BaseDialog.vue

Код: Выделить всё

.base-dialog {
max-width: none;
max-height: none;
margin: 20px !important;
display: flex;
flex-direction: column;
height: calc(100vh - 40px);
overflow: hidden;

:deep(.el-dialog__header) {
background: $primary-color;
margin: 0;
padding: $spacing-unit * 2;

.el-dialog__title {
color: white;
font-weight: bold;
}
}

:deep(.el-dialog__body) {
display: flex;
flex-direction: column;
padding: $spacing-unit * 3;
overflow: hidden;
height: 100%;
flex: 1;
}
}

Компонент StockForm.vue

Код: Выделить всё

Код: Выделить всё

  
.stock-form {
margin-bottom: $spacing-unit * 3;

.unit-conversion-section {
margin-bottom: 80px;
}

.bottom-section {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
gap: 20px;
}
}

Компонент UnitConversion.vue

Код: Выделить всё

{{ t("stock.buttons.existSecond") }}










...


.unit-conversion {
margin-top: 36px;
gap: $spacing-unit;

.conversion-row {
display: flex;
gap: $spacing-unit;
flex-direction: column;
}

.conversion-section {
display: flex;
align-items: center;
gap: 15px;
height: 60px;
.var-ise-button {
max-width: 250px;
min-width: 150px;
min-height: 42px;
align-items: center;
justify-content: center;
flex-basis: 30%;
padding: 0 20px;
}
}
.el-button {
height: 40px;
}

.conversion-fields {
display: flex;
gap: $spacing-unit * 3;
flex: 1;

.el-form-item {
flex: 1;
white-space: nowrap;
:deep(.el-form-item__label) {
font-size: 12px;
}
}
}
.w-100 {
width: 80%;
}
}

Как обеспечить, чтобы нижняя часть оставалась зафиксированной внизу, а верхняя часть прокручивалась правильно, без перекрытия? Есть ли способ динамически настроить макет или сделать диалоговое окно прокручиваемым таким образом, чтобы оно соответствовало обоим разделам?
Будем признательны за любые предложения или рекомендации по решениям на основе CSS или JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/793 ... scrollable