Vertical Flex Boxes and Jquery Ui resize

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;
}