title: Bad select block size in div block with contenteditable (Chrome, Safari)
body: <p>Example:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    max-width: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div contenteditable="true"&gt;
    text text text text text
    &lt;select&gt;
      &lt;option&gt;bigbigbigbigbigbigbig&lt;/option&gt;
    &lt;/select&gt; text text text text text text text
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Select block height in Chrome (<a href="https://habrastorage.org/files/f2f/8e1/448/f2f8e14487d64f509849229fca8ae4de.png" rel="nofollow">Screenshot1</a>) - bad.</p>
  
  <p>Select block height in Firefox (<a href="https://habrastorage.org/files/684/a0e/0aa/684a0e0aad7d4c3b8b6ce4d573910073.png" rel="nofollow">Screenshot2</a>) - good.</p>
  
  <p>How to solve this problem?</p>