How can I force a dynamic <ul> to be 100% the height of it's parent, no more, no less?
<p>I'm having a bit of trouble with a couple of <code>&lt;ul&gt;</code> list objects on one of my pages.</p>

<p>I have two <code>&lt;ul&gt;</code> list containers that are populated from the client browser.  Unrelated to this discussion, these two containers will allow for users to drag-and-drop <code>&lt;li&gt;</code> options left&lt;->right from each container, and will be used for a form of manual sorting.</p>

<p>My problem is that either of these lists may contain 0 to upwards of 60 items.  When there are many list items in one of the list containers, the parent grows well past the size screen and scroll bars appear, while the <code>&lt;ul&gt;</code> container grows as large as it needs to be.  </p>

<p>I'd prefer for the scroll bars to be on the <code>&lt;ul&gt;</code> objects only (and function properly.)</p>

<p>I've googled this, and I've found multiple answers regarding forcing content to the size of a parent container, but most examples usually  involve <code>&lt;div&gt;</code> objects and I'm not sure if there is something different with the <code>&lt;ul&gt;</code> container which causes it to behave differently.</p>

<p>Below is my pertinent code.</p>

<h2>HTML</h2>

<pre><code>...
&lt;ul class="col_selector_container" id="ulUnusedColumns"&gt;&lt;/ul&gt;
&lt;ul class="col_selector_container" id="ulUsedColumns"&gt;&lt;/ul&gt;
...
</code></pre>

<p>This content is contained in a third-party Telerik control.  The content area of the Telerik control is a div that is sized to fit the available content area, with or without content provided by the developer.  However, the content area does grow larger if the internal content doesn't fit and, thus, the automatic scroll bars appear when the <code>&lt;ul&gt;</code> containers are populated and over-sized.</p>

<h2>CSS</h2>

<pre><code>ul.col_selector_container 
{
    overflow-y: scroll;
    list-style-type: none;
    height: 100%;
    width: 300px;
    display:inline-block;
    vertical-align:top;
    padding-left: 0px;
}
</code></pre>

<p>Note that the <code>height: 100%</code> doesn't appear to do anything.  The list will grow or shrink to match the height of the internal content, not the height of the parent container.  Also, <code>overflow-y: scroll;</code> doesn't do anything other than show the scroll bars, which is pointless if the UI is just going to resize the list.</p>

<p>How can I fix this?</p>

<h2>ADDITIONAL NOTES</h2>

<p>I am using jquery &amp; jqueryui for for sortign and working with UI elements.  A good answer can involve using one of these tools if there is an option within these tools that can fix my problem, but that's certainly not required.  Pertaining to this questino, JQuery never touches the layout of these object, other than inserting <code>&lt;li&gt;</code> objects, derived from my data list at runtime.</p>

<p>For those wanting an example, the best I can give is an example of the problem.</p>

<p>Here is a <a href="https://jsfiddle.net/qjey9hgf/" rel="nofollow">JSFiddle</a>.  Notice that the <code>&lt;ul&gt;</code> list is populated so that the content region of the fiddle has a scroll bar.  Also note the pointless scroll bar on the list?  How can I make it so that the content area doesn't need a scroll bar because the <code>&lt;ul&gt;</code> sizes itself to the content window (with more or less list items) and you can scroll through the list content when the list region is to large.</p>