He creado un menú desplegable con entrada usando li. Sin embargo, la altura de la ul es fija. Quiero configurar la altura de ul para que se establezca dinámicamente en función de la cantidad de elementos que se muestran, de modo que si no hay elementos en la lista, la altura sea menor.

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