jQuery-ui的resize功能无法与chrome中的flexbox模型正常交互,但在FF和IE中成功

Question

我创建了一个div,它分为两列,中间有一个处理程序.用户可以向右或向左拖动此处理程序,并且列宽将相应地适应(一列将变宽,另一列将变小,总宽度将保持不变).

我如何尝试完成此操作可以在以下jsfiddle示例中找到:最小工作/失败示例.如果您使用最新版本的FF或IE进行测试,您会看到它按预期工作.但是,在Chrome中,处理程序变得不可见.

我认为这可能与flexbox模型和jquery-ui调整大小功能的工作方式(使用css定位技巧)之间的交互有关.为了克服这个问题,我找到了一些黑客(将位置设置为相对位置和左侧位置为0).我认为Chrome对这些黑客的反应不同于FF/IE.

任何人都可以向我解释正在发生的事情或暗示我正确的方向来解决这个问题吗？

ps:这个问题是我得到了黑客的想法

HTML:

<div id="container">
    <div id ="left">left</div>
    <div id ="resizable">
        <div id="handler" class="ui-resizable-handle ui-resizable-w"></div>
        <div id="right">right</div>
    </div>
</div>

JavaScript的:

$("#resizable").resizable({handles: {'w' : '#handler'}});

CSS:

#container{
    background-color: black; /* we are not supposed to see any black but we do in Chrome indicating that the handler of the resizable box is not visible(in IE and FF everything works as intended) */
    display: flex;
    flex-direction: row;  
    height: 100px;
}

#resizable{
    display: flex; /* a flex box itself so the right panel can take all space not taken by the handler */
    flex-direction: row;
    width: 50%;

    /* hack to ignore the absolute positioning done by jquery ui */
    left:0 !important;
    position:relative !important;
    /* removing this completely destroys the functionality in IE and FF */
}

#left{
    border-right: 1px solid yellow;
    background-color: darkred;
    flex : 1;
    text-align: center;
}

#right{
    border-left: 1px solid yellow;
    background-color: steelblue;
    flex : 1;
    text-align: center;
}

#handler{
    background-color: green;
    width:5px;

    /* hack to ignore the absolute positioning done by jquery ui */    
    position:relative!important;
    left:0px!important;
    /* removing these makes the handler visible in chrome but makes it not pixel perfectly positioned in FF and IE as can be derived from the yellow borders being invisible */
}

Answer 1

检查这个更新的小提琴

我只是稍微改变一下，如下所示

#container{
    ...
    position:relative;
}

#handler{
    ...
    position:absolute!important;
}