Есть хороший способ изменить высоту элемента в соответствии с размером окна?

Question

Я использую высоту с единицами 'vh', но это не так хорошо, как я хочу.У меня есть выпадающий список, в котором есть свиток, его размер: 'height: 32vh', в наименьшем разрешении, которое мне нужно поддержать, он выглядит хорошо (есть хорошая прокрутка, и выпадающий список не отслеживается).Но на большом экране я хочу, чтобы выпадающее меню было выше, чем значение 32vh.До того, как я использовал единицы 'vh', я использовал max-height: 320px, но выпадение в маленьком разрешении было отслежено, и если я поместил менее 320px на большой экран, выпадающий список слишком короткий.Есть ли решение этой проблемы?

<div class="parent">
<div class="arrow-up"></div>

<div class="checkbox group">
    <label class="ng-binding">
    ...
    </label>
</div>

<div class="separator"></div>

<div>
    <button type="button" class="btn btn-link select-btn ng-binding" ng-disabled="isSelectAllDisabled()" ng-click="selectAll()" disabled="disabled">Select All</button>
    <button type="button" class="btn btn-link select-btn ng-binding" ng-click="selectNone()">Select None</button>
</div>
<div class="columns-list scroll">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
        ...
</div>

Стиль:

.parent {
    height: 34vh;
    display: flex;
    flex-direction: column;
}
.columns-list.scroll {
    overflow-y: auto;
}