title: how to increase the size of a div with a list based on the number of elements in the list
body: <p>index.html</p>
  <pre><code>&lt;div class=&quot;list&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;item1&lt;/li&gt;
        &lt;li&gt;item2&lt;/li&gt;
        &lt;li&gt;item3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  <p>style.css</p>
  <pre><code>.list {
      display: flex;
      flex-direction: column;
      max-height: 200px !important;
      overflow: auto;
      min-height : 115px;
  }
  </code></pre>
  <p>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</p>