title: How do I set a scrollable list to have a maximum size but shrink when it's not needed?
body: <p>I'm working on a details page that draws data from a database. The details page could have related data from two other tables, both of which might have no or many records to display.</p>
  <p>The basic structure looks like this (using Bootstrap):</p>
  <pre><code>&lt;div class=&quot;scrolling&quot;&gt;
      &lt;h2&gt;First Group of Records&lt;/h2&gt;
      &lt;ul class=&quot;list-group&quot;&gt;
          &lt;li class=&quot;list-group-item&quot;&gt;
              Related record details
          &lt;/li&gt;
          ...
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;scrolling&quot;&gt;
      &lt;h2&gt;Second Group of Records&lt;/h2&gt;
      &lt;ul class=&quot;list-group&quot;&gt;
          &lt;li class=&quot;list-group-item&quot;&gt;
              Related record details
          &lt;/li&gt;
          ...
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The CSS for the <code>scrolling</code> class is:</p>
  <pre><code>.scrolling {
      height: 30%;
      overflow-y: scroll
  }
  </code></pre>
  <p>This works and nearly gives me what I want, but I'd like for each of the scrolling <code>divs</code> to shrink if the extra space isn't needed. How can I do that with either existing Bootstrap features or additional CSS?</p>