html - Selected affects horizontal position in Chrome -

html - Selected <option> affects horizontal position in Chrome -

i have 2 <select> boxes in sliding <div> within <div> overflow:hidden. if no <option> selected, chrome renders fine. when alternative selected, chrome slides inner <div> on bit. ff33 , ie11 render fine.

i used able slide inner div jquery show 1 <select> or other. chrome starts off positioned incorrectly.

seems chrome bug. reported in chrome help > study issue. until prepare it, have workaround?

see http://jsfiddle.net/dqq38kbk/ or same thing below

class="snippet-code-html lang-html prettyprint-override">selected <div style='overflow: hidden; height: 100px; width: 100px; border: 1px solid black;'> <div style='height: 100px; width: 500px;'> <select style='background: yellow;' size='6'> <option>option1</option> <option selected>option2</option> <option>option3</option> </select> <select style='background: pink;' size='6'> <option>option1</option> <option selected>option2</option> <option>option3</option> </select> </div> </div> not selected <div style='overflow: hidden; height: 100px; width: 100px; border: 1px solid black;'> <div style='height: 100px; width: 500px;'> <select style='background: yellow;' size='6'> <option>option1</option> <option>option2</option> <option>option3</option> </select> <select style='background: pink;' size='6'> <option>option1</option> <option>option2</option> <option>option3</option> </select> </div> </div>

html css google-chrome