index.html
<div class="list">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
style.css
.list {
display: flex;
flex-direction: column;
max-height: 200px !important;
overflow: auto;
min-height : 115px;
}
in the above code the number of li items inside ul tag may vary so I want to keep the height for the div only that will be needed for the li tags to be displayed completely how to change the height dynamically based on the number of li elements and the space they occupy
Try adding max-height to the css of the class you are using.
.list {
display: flex;
flex-direction: column;
max-height: 200px !important;
overflow: auto;
min-height : 115px;
max-height: 100%;
}