Fancybox salah ukuran konten saat menggunakan jQuery-Chosen?

Saya memiliki popup Fancybox yang menggunakan AJAX untuk mengambil konten.

HTML yang diambil adalah div, berisi judul, tabel dengan kolom input, dan beberapa tombol.

Masalahnya adalah, saya mendapatkan bantalan ekstra, atau ukurannya terlalu kecil; lagi pula saya punya bilah gulir yang tidak perlu. Saya dapat menonaktifkannya sepenuhnya menggunakan properti overflow CSS, atau properti scrolling Fancybox, tetapi saya tidak ingin menonaktifkannya sepenuhnya - hanya ditambahkan bila diperlukan.

Saya menggunakan Plugin jQuery Chosen, yang menyebabkan overflow; bagaimana cara menghindarinya?

Konten div dimodifikasi oleh klien, karena mereka dapat menambah/menghapus baris secara dinamis - jadi saya memerlukan bilah gulir untuk muncul jika pengguna menambahkan terlalu banyak baris agar muat di layar. Inilah yang terjadi sejauh ini:

Apa yang salah dengan ini? Inilah CSS saya untuk hal tersebut:

#filter-form {
    width: 550px;
}
#filter-form h2 {
    text-align: center;
}
#filter-form .chzn-results {
    max-height: 110px;
}
#filter-form .buttons {
    margin-top: 10px;
    overflow: hidden;
}
#filter-form .buttons .btn_save_filter {
    float: right;
}
#assoc-num, #assoc-string {
    display: none;
}

#filter-form #CustomUserFilters_title {
    width: 350px;
    display: block;
    margin: 0 auto 30px;
}
#add-new-row td {
    text-align: right;
}
#add-new-row button {
    display: inline;
}
#filter-rules, #filter-form .buttons {
    width: 500px;
    margin: 0 auto;
}
#filter-rules td {
    width: 25% !important;
}

Setelan lebar tidak menjadi masalah - menghapus atau menambah keduanya tetap menyebabkan hal tersebut - jadi bukan fitur ukuran otomatis Fancybox yang menganggap konten lebih kecil -- fitur ini selalu mengubah ukurannya sesuai kebutuhan, minus beberapa piksel yang menyebabkan overflow.

Ini HTMLnya (saya tahu kekacauan besar):

<div id="filter-div">
<form action="/customUserFilters/create" id="filter-form">
<h2>Create Filter</h2>
<input placeholder="Filter name" type="text" value="" name="CustomUserFilters[title]" id="CustomUserFilters_title"><table id="filter-rules">
    <tbody><tr class="filter-row">
<td class="td-bool-op"></td>
<td class="td-field-id"><select id="" style="width: 150px;" name="CustomUserFilterSettings[][field_id]">
<option value="2">Name</option>
</select></td>
<td class="td-assoc"><select style="width: 100px;" name="CustomUserFilterSettings[][assoc]">
<option value="=">=</option>
</select></td>
<td class="td-value"><input type="text" value="" name="CustomUserFilterSettings[][value]" id="CustomUserFilterSettings_value"></td></tr>    <tr id="new-filter">

<td class="td-bool-op"><select id="" style="width: 60px;" name="CustomUserFilterSettings[][bool_op]">
<option value="AND" selected="selected">AND</option>
<option value="OR">OR</option>
</select></td>
<td class="td-field-id"><select id="" style="width: 150px;" name="CustomUserFilterSettings[][field_id]">
<option value="2">Name</option>
</select></td>
<td class="td-assoc"><select style="width: 100px;" name="CustomUserFilterSettings[][assoc]">
<option value="=">=</option>
</select></td>
<td class="td-value"><input type="text" value="" name="CustomUserFilterSettings[][value]" id="CustomUserFilterSettings_value"></td>    </tr>
    <tr id="add-new-row">
        <td colspan="4">
            <button id="add-new-row-button" class="btn_grey" name="yt0" type="button">+ Add Another Condition</button>        </td>
    </tr>
</tbody></table>
<div class="buttons">
    <button class="btn_orange btn_save_filter" name="yt1" type="button">Create Filter</button>    <button class="btn_grey btn_cancel_filter" name="yt2" type="button">← Cancel</button></div>
</form>

And here's the Fancybox init:

$('#new_filter_button').fancybox({
    beforeLoad: function() {
        $('.qtip').hide();
    },
    type: 'ajax',
    href: window.baseUrl + '/customUserFilters/create',
    openEffect: 'fade',
    closeEffect: 'fade',
    wrapCSS: 'filters-box'
});