Jquery ui 垂直Flex框和Jquery Ui调整大小

我有一个vetical flex box容器和两个flex box。底部的一个是固定大小的，顶部的一个占据了剩余的空间。这很有效

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

JS:

我现在使用jqueryui使底部的一个可以调整大小，我得到了一个奇怪的行为。出于某种原因，jqueryui不仅设置底部容器的大小（高度），还设置“top”属性

我能做些什么来避免设置这个顶级属性的大小调整吗

---

jQuery将元素设置在

绝对位置

您可以使用
进行测试并找到答案！重要信息
要覆盖jQuery设置的某些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;
}

$("#B").resizable({
    handles: "n"
});

#B{
    height: 200px;
    width: 100%;
    background: blue;
    /* overrides any inline style or javascript style */
    position:relative!important;
    bottom:0!important;
    top:auto!important;
}