title: UL breaks out of 100% height container
body: <p>UL list items don't seem to obey the parent container 100% width in chrome and firefox.  I tried using <code>list-style-position:inside;</code> but that doesn't seem to help:</p>
  
  <pre><code>&lt;html style="height: 100%"&gt;
  &lt;body style="height: 100%"&gt;
      &lt;div id="mainContainer" style="background: orange; height: 100%;"&gt;
  
          &lt;div style="background: #1f1f1f; width: 200px; height: 100%;"&gt;
  
              &lt;ul style="list-style-position: inside;"&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
                  &lt;li&gt;hello&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Can anyone explain how I can get the ul text in the example inside the orange div container?</p>