jQuery-ui's resize functionality fails to interact properly with the flexbox model in chrome but succeeds in FF and IE

Question

I have made a div which is split in two columns with a handler in between. The user can drag this handler right or left and the column widths will adapt accordingly (one column will widen, the other will become smaller and the total width will remain constant).

How I tried to accomplish this can be found in the following jsfiddle example: minimal working/failing example. If you test this with one of the latest versions of FF or IE, you will see that this works as intended. In Chrome, however, the handler becomes invisible.

I think this might have to do with an interaction between the flexbox model and the way jquery-ui's resize functionality works (which uses css positioning tricks). I have found some hacks (setting position to relative and left position to 0) in order to overcome this. I think Chrome reacts differently on these hacks than FF/IE.

Can anyone explain to me what is going on or hint me in the right direction for solving this?

ps: This question is where I got the ideas for the hacks

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

check this UPDATED Fiddle

I just change it a little bit as below

#container{
    ...
    position:relative;
}

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

Answer 2

Actually, your problem is quite simple. It's that of inheritance.

What you can do is set resizable to:

height: inherit;

and it works. Alternatively you can also set it to "100%".

Why does this happen? I am not certain; my guess would be that this has to do with the flexbox specification. I am a bit old school and I don't like flexbox at all (though it will rightfully become the standard soon if it hasn't yet). Its specification is a bit tricky. For example the way it works on chrome is that height takes the percentage of the parent container which is explicitly specified.

Now you specify height on "container" and on "handler", but since the parent of "handler" ("resizable") does not have a height specified, it probably uses the 100% of the default chrome value of height which is "auto".

That would be my guess. As to why it is invisible, you can be certain that it's an issue with height/positioning in flexbox setting on chrome.

I tried it on chrome and firefox and it seems to be fine - here's the fiddle.