jQuery UI Dialog on resizing shrinks the content of the Dialog

Question

I have seen a strange behavior of jQuery UI Dialog and I am not able to understand:

1. What the issue is? or
2. What am I doing wrong here? or
3. Is this a known bug?

Steps followed to replicate the issue:

1. Open the jQuery UI dialog by clicking on the New / More buttons.
2. Then try re-sizing the dialog vertically.
3. You will see the abnormality that width of the dialog's content decreases automatically, making a scrollbar to appear inside the dialog.

EDIT: I see that if I remove twitter bootstrap from the page then the issue still appears but is not much noticeable. whatever be the reason I cannot remove twitter bootstrap from my page because it is being used in all other places in my current project.

Before re-sizing

After re-sizing

Here is my jQuery code. Please check the JSFiddle here:

$(document).on("click", "#btnNew", function () {
    $("#popOutNewFolder").dialog({
        show: "blind",
        hide: "blind",
        modal: true
    });
});

$(document).on("click", "#btnMore", function () {
    $("#popOutMoreFolder").dialog({
        show: "blind",
        hide: "blind",
        modal: true
    });
});

Answer 1

In the tickets #8506 and #9832, it is mentioned, that the bug has to do with different box-sizing set. Obviously the calculation of the dialog/content doesn't work right if the dialog container or the dialog content are not box-sizing: content-box. Best solution for me was adding this to the css:

.ui-dialog, .ui-dialog-content {
    box-sizing: content-box;
}

Updated jsFiddle with this fix.