Jquery手风琴内容高度不自动适应

Question

我通过 API 查询动态填充我的手风琴，由于某种原因，它不会根据我的内容高度自动调整大小。我已经设置了height style: "content",，但它仍然不起作用。如何设置高度以自动适应我的内容并消除溢出？

这是我的代码： HTML：

<div id="job_accordion" class=""></div>

Javascript：

$(document).ready(function () {
    $.get("https://api/open/jobs/?page_size=1000")
        .done(function (data) {
            let jobs_list = data.results.sort((a, b) => (a.organization_name > b.organization_name) ? 1 : -1)
            let department_name = "";
            $.each(jobs_list, function (index, job) {
                let department_id = job.organization_name.toLowerCase();
                if (department_name != job.organization_name) {
                    $('#job_accordion').append(`
                                                <!--${job.organization_name}-->
                                                <button class="accordion">${job.organization_name}</button>
                                                <div class="panel">
                                                    <ol id="${department_id}_list">
                                                    </ol>
                                                </div>`
                    );
                    department_name = job.organization_name;
                }
                $(`#${department_id}_list`).append(`<li>
                                                        <button type="button" class="btn-job" data-toggle="modal" data-target="#job_modal" onClick="displayJobModal(${job.id})">
                                                        ${job.position_name}
                                                        </button>
                                                    </li>`);
            });

            $("#job_accordion").accordion({
                event: 'click',
                collapsible: true,
                active: false,
                // autoHeight: false,
                fillSpace: true,
                clearStyle: true,
                heightStyle: "content",
                animate: 200,
                icons: false
            }).children('li').on('mouseenter', function () {
                $(this).find('h3').trigger('click');
            });

        })
        .fail(function (request, error) {
            console.log(error);
        })
        .always(function () {
        });

});

CSS：

<style>
        #job_accordion .ui-accordion-header a {
            color: #fff;
            line-height: 42px;
            display: block;
            font-size: 12pt;
            width: 100%;
            text-indent: 10px;
        }

        #job_accordion .panel {
            border: 0;
            color: #fff;
            background: #000;
            /*padding: 0 0 5em 0; */
            border-top: 0;
            /*overflow: hidden;*/
            /*height: 1000px;*/
        }
    </style>

Answer 1

找到它，将 max-height 设置为 fit-content。

#job_accordion .panel {
            border: 0;
            color: #fff;
            background: #000;
            padding: 0 0 0 0;
            border-top: 0;
            max-height: fit-content;
        }