Функция jQuery-ui resize не позволяет корректно взаимодействовать с моделью flexbox в хроме, но преуспеть в FF и IE

Я сделал 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 */
}

ОТВЕТЫ

Ответ 1

проверьте этот ОБНОВЛЕНО Fiddle

Я немного изменил его как ниже

#container{
    ...
    position:relative;
}

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

Ответ 2

Собственно, ваша проблема довольно проста. Это наследование.

Что вы можете сделать, это установить resizable в:

height: inherit;

и он работает. В качестве альтернативы вы также можете установить его на "100%".

Почему это происходит? Я не уверен; я предполагаю, что это связано с спецификацией flexbox. Я немного старая школа, и мне совсем не нравится flexbox (хотя она по праву скоро станет стандартом, если она еще не была). Его спецификация немного сложна. Например, способ работы с хром заключается в том, что высота принимает процент от родительского контейнера, который явно указан.

Теперь вы указываете высоту над "контейнером" и "обработчиком", но поскольку родительский элемент "обработчик" ( "изменяемый размер" ) не имеет указанной высоты, он, вероятно, использует 100% значения по умолчанию хром высоты который является "авто".

Это было бы моим догадком. Что касается невидимости, вы можете быть уверены, что это проблема с высотой/позиционированием в настройке flexbox на хроме.

Я попробовал его на chrome и firefox, и, похоже, все в порядке - здесь fiddle.