有没有一种很好的方法可以根据窗口大小更改元素的高度？

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