Select2 bad positioning when dropdown doesn't fit in reamining container height - jquery-select2

Question

I have this problem with the selec2 plugin where the drop down position it's not aligned with the select. (too bad I can't post pictures, no reputation points, I'll use my imagination:)
The way it looks:
|--------Dropdown------|
|-------Select--------|
The way it should look:
|--------Dropdown-----|
|-------Select--------|
(The dropdown it's oppening up because the select its on the bottom edge of the page)
I have read about jquery having issues to calculate offsets of elements that had a css transformation, and tried every workaround and tried to comment every transform word in my code... no results.
I've found that the issue is fixed when I give my html body enough height to make it scroll (I don't want that). Do you guys have some ideas? (see my code bellow):
HTML:
<div style="margin-left:50px;width:250px; float: left;">
<select name="marca" id="marca" data-placeholder="Marca"
class="select2" tabindex="15">
<option value=""></option>
<option class="response" value="ALCATEL" text="Alcatel">Alcatel</option>
<option class="response" value="APPLE" text="Apple">Apple</option>
<option class="response" value="AVVIO" text="Avvio Full">Avvio
Full</option>
<option class="response" value="ENSPIRE" text="Cellon Enspire">Cellon
Enspire</option>
<option class="response" value="ERIC" text="Ericsson">Ericsson</option>
<option class="response" value="HTC" text="High Tech Computer ">High
Tech Computer</option>
<option class="response" value="HUAWEI" text="Huawei">Huawei</option>
<option class="response" value="IMAC" text="Imac">Imac</option>
<option class="response" value="LG" text="Lg">Lg</option>
<option class="response" value="M4TEL" text="M4tel">M4tel</option>
<option class="response" value="MOTO" text="Motorola">Motorola</option>
<option class="response" value="NOKI" text="Nokia">Nokia</option>
<option class="response" value="PALM" text="Palmone Modelo">Palmone
Modelo</option>
<option class="response" value="PACO" text="Pantech Co., Ltd">Pantech
Co., Ltd</option>
<option class="response" value="PCD"
text="Personal Communication Device">Personal
Communication Device</option>
<option class="response" value="SAGEM" text="Sagem">Sagem</option>
<option class="response" value="SAMS" text="Samsung">Samsung</option>
<option class="response" value="SWT"
text="Servicell Wireless Technologie">Servicell Wireless
Technologie</option>
<option class="response" value="SIWI" text="Sierra Wireless">Sierra
Wireless</option>
<option class="response" value="SKTE" text="Sk Teletec Co.,ltd">Sk
Teletec Co.,ltd</option>
<option class="response" value="TELU" text="Telular">Telular</option>
<option class="response" value="VERYKOOL" text="Verykool">Verykool</option>
<option class="response" value="VKMOB" text="Vk Mobile">Vk
Mobile</option>
<option class="response" value="ZONDA" text="Zonda">Zonda</option>
<option class="response" value="ZTE" text="Zte Corporation">Zte
Corporation</option>
</select>
</div>
The select CSS:
#disponibilidadForm select {
width: 245px;
}
#modelo,#marca {
overflow: hidden;
}
.select2-offscreen,.select2-offscreen:focus {
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
border: 0;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
outline: 0;
left: 0px;
}
user agent stylesheetkeygen,select,select[size="0"],select[size="1"] {
border-radius: 0px;
}
user agent stylesheetselect {
-webkit-appearance: menulist;
box-sizing: border-box;
-webkit-align-items: center;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
background-color: white;
cursor: default;
}
user agent stylesheetkeygen,select {
border-radius: 5px;
}
user agent stylesheetinput,textarea,keygen,select,button,isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
user agent stylesheetinput,textarea,keygen,select,button,isindex,meter,progress
{
-webkit-writing-mode: horizontal-tb;
}
Inherited from div.float_left
.float_left {
text-align: left;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from form#disponibilidadForm
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from div.formulario.float_right
.float_right {
text-align: left;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from div
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from div.contenido
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from body
body {
line-height: 1;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}
Inherited from html
html {
font-family: Arial, Helvetica, sans-serif;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
font-size: 100%;
font: inherit;
}

Answer 1

Adding the css property "overflow: scroll;" to the html body fixed the position of the dropdown, and the page doesn't get scrolled