title: fit HTML UL LIST inside dynamic sized DIV container without losing content
body: <p>I am creating dynamic <code>&lt;ul&gt;</code> lists which sometimes have 10 <code>&lt;li&gt;</code> items, or sometimes 50 <code>&lt;li&gt;</code> items. I need to place this list inside a <code>&lt;div&gt;</code> container (which its height/width vary due to responsive design). Let me show you examples:</p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;style&gt;
      .container{
          border:1px solid #ccc;
          height: 150px;
          width: 500px;
      }
  &lt;/style&gt;
  &lt;div class="container"&gt;
      &lt;ul&gt;
          &lt;li&gt;test sdfsdfs&lt;/li&gt;
          &lt;li&gt;testsdf sdfsd&lt;/li&gt;
          &lt;li&gt;test sdfsdfs&lt;/li&gt;
          &lt;li&gt;testsdf sdfsd&lt;/li&gt;
          &lt;li&gt;test sdfsdfs&lt;/li&gt;
          &lt;li&gt;testsdf sdfsd&lt;/li&gt;
          &lt;li&gt;test sdfsdfs&lt;/li&gt;
          &lt;li&gt;testsdf sdfsd&lt;/li&gt;
          &lt;li&gt;test sdfsdfs&lt;/li&gt;
          &lt;li&gt;testsdf sdfsd&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This will result in the following:
  <img src="https://i.stack.imgur.com/Kpf0p.jpg" alt="enter image description here"></p>
  
  <p>I need the list items to always stay inside the div container, so in the scenario above, the remaining list items (the ones outside the container) should continue to display on the right side, visually creating two columns. </p>
  
  <p>Restrictions:</p>
  
  <ul>
  <li>the HTML needs to stay the same, with the exception of adding more list items</li>
  <li>the <code>.container</code> width and height are dynamic so they can vary. </li>
  <li>if the container is too small for the list not to show on another column, then the remaining lists will hide.</li>
  <li>no plugins (i.e. Bootstrap, Foundation, etc..)</li>
  </ul>
  
  <p>Please let me know if you need more details.Thank you in advance. </p>