How to fix lists inside block with contenteditable in chrome?

Question

css

There is a block with contenteditable, inside there is text with drop-down lists in which list items with long names.

<div contenteditable="true">
    text text text text text <select><option>bigbigbigbigbigbigbig</option></select> text text text text text text text 
</div>

For the list, I set the maximum width

select {
    max-width: 40px;
}

and I get inadequate block height in chrome:

although it works fine in FF:

How to overcome this problem?
Example in jsfiddle

Answer 1

solved

select {
  max-width: 40px;
  word-wrap: normal;
}

or

select {
  max-width: 40px;
  vertical-align:top;
}