I have created a dropdown with input using li. However, the height of the ul is fixed. I want to set the height of ul to set dynamically based on the number of items displayed so that if there are no items in the list the height is less.

 <div class="filterdropdown">
            <input placeholder="Enter a filter name"/>
            <div><img src="../Images/ICE.FilterChevron.png"  @click="filters.isShow = !filters.isShow" /></div>
        </div>
        <div v-if="filters.isShow">
            <ul>
                <li v-on:click="createNew">Create new Filter</li>
                <li v-for="item in filters.entities" v-on:click="filter.changeFilter(item.id,item.name)">{{ item.name }}<div title="Delete filter">x</div></li>
            </ul>
        </div>

CSS

    ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #333;
    height: 85px;
    overflow: hidden;
    overflow-y: scroll;
}