title: HTML select dropdown going off screen
body: <p>Considering the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="float: left;"&gt;
    &lt;select style="width: 160px;"&gt;
      &lt;option&gt;asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div style="float: right;"&gt;
    &lt;select style="width: 160px;"&gt;
      &lt;option&gt;asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When opening the right selectbox, the contents of the dropdown go off the screen. Also when the list would be longer, you would not be able to scroll through the list (only with mousewheel and keyboard, but the scrollbar is invisible)</p>
  
  <p>Is there a fix for this? Ofcourse you could set a width / max-width on the options, but that would cut off the contents of the option element. Any suggestions?</p>