Vertical Flex Boxes and Jquery Ui resize - jquery-ui

Question

I have a vetical flex box container with two flex boxes. Te bottom one is fixed size and the top one takes up the rest of the space. This works great.
<div id="outer">
<div id="A">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="B"></div>
</div>
CSS:
body, html{
width: 100%;
height: 100%;
}
#outer{
width: 100%;
height: 100%;
background: yellow;
display: flex;
flex-direction: columN
}
#A{
height: 20px;
max-height: 100%;
width: 100%;
flex: 2;
background: #cccccc;
overflow: auto;
}
#B{
height: 200px;
width: 100%;
background: blue;
}
JS:
$("#B").resizable({
handles: "n"
});
I i now make the bottom one resizable with jquery ui i get a strange behaviour. For some reason jquery ui not only sets the size (height) of the bottom container but also the "top" property.
Is there anything i can do to keep resiable from setting this top property?
http://jsfiddle.net/t6B2e/8/

Answer 1

Your jQuery set your element in absolute position.
you can test and find out using !important to override some of the CSS set by jQuery: http://jsfiddle.net/t6B2e/9/
#B{
height: 200px;
width: 100%;
background: blue;
/* overrides any inline style or javascript style */
position:relative!important;
bottom:0!important;
top:auto!important;
}