scroll в div - не появляется

Есть сложное web-приложение, в котор-торое я встраиваю небольшой div, содержащий таблицу. То есть, буквально, на странице приложения есть "окошко" (фиксированного размера в процентах от окна браузера, как я понял по внешним признакам), куда мне надо вывести таблицу с переменным числом строк.

И, конечно, я хочу, чтобы при большом количестве строк в div'е возникал вертикальный скроллбар.

я формирую html и css код для этого div'а

div устроен просто, вот весь его код:

    <div id='myspan' class='scroll'><h3>Список финтифлюшек</h3>
    <table class="topTableClass">
        <thead>
            <tr>
                <th>Дата</th>
                <th>Название</th>
                <th>ID проблемы</th>
                <th>Статус1</th>
                <th>→</th>
                <th>Статус2</th>
            </tr>
        </thead>
    <tbody>    <tr class='trCls'><td>04.09.2024 10:09</td><td>Инфраструктура_ ЦПЛ</td><td>TR000000001023</td><td>Оценка - валидация СН</td><td>→</td><td>Анализ</td>
    </tr>
        <tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001946</td><td>Недоступность функций из-за исчерпания ресурсов на виртуальном сервере</td><td>→</td><td>Отказ виртуального сервера</td>
    </tr>
        <tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001947</td><td>Недоступность функций из-за сбоя или некорректной работы подключения к сети Интернет</td><td>→</td><td>Невозможность соединения</td>
    </tr>
        <tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001948</td><td>Недоступность функций из-за исчерпания ресурсов СУБД</td><td>→</td><td>Невозможность работы с БД</td>
    </tr>
    </tbody>
    </table>
    </div>

И кол-во строк в этой таблице - переменное.

С классом scroll, как мне кажется, я тоже сдалал всё правильно, от выглядит так:

    .scroll {
        overflow: scroll;
        overflow-y: scroll;
        overflow-x: scroll;
    }

А потом происходит следующее: когдя я тестирую свой div - всё работает корректно, сколлбар появляется. А на "настоящей" странице - не появляется.

я очень плохо знаю css, но подозреваю, что в одном из "блоков более высокого уровня" может быть как то "глобально отменён" скролл.

Подскажите, пожалуйста, как можно попробовать бороться с этой проблемой? Спасибо.

PS. я знаю правило насчет минимально воспроизводимого примера, но не могу понять, как из всего веб-приложения "вырезать" пример страницы


Ответы (1 шт):

Автор решения: Max V

Вот пример с горизонтальным и вертикальным скролом в блоке div.

div {
  height: 150px;
  width: 500px;
}
.scroll {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: grey;
}
<div id='myspan' class='scroll'><h3>Список финтифлюшек</h3>
    <table class="topTableClass">
        <thead>
            <tr>
                <th>Дата</th>
                <th>Название</th>
                <th>ID проблемы</th>
                <th>Статус1</th>
                <th>→</th>
                <th>Статус2</th>
            </tr>
        </thead>
    <tbody>
    <tr class='trCls'>
    <td>04.09.2024 10:09</td><td>Инфраструктура_ ЦПЛ</td>
    <td>TR000000001023</td><td>Оценка - валидация СН</td>
    <td>→</td><td>Анализ</td>
    </tr>
        <tr class='trCls'><td>04.09.2024 21:00</td>
        <td>Тестовый сервис</td><td>000000001946</td>
        <td>Недоступность функций из-за исчерпания ресурсов на виртуальном сервере</td>
        <td>→</td><td>Отказ виртуального сервера</td>
    </tr>
        <tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001947</td><td>Недоступность функций из-за сбоя или некорректной работы подключения к сети Интернет</td><td>→</td><td>Невозможность соединения</td>
    </tr>
        <tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001948</td><td>Недоступность функций из-за исчерпания ресурсов СУБД</td><td>→</td><td>Невозможность работы с БД</td>
    </tr>
<tr class='trCls'><td>04.09.2024 10:09</td><td>Инфраструктура_ ЦПЛ</td><td>TR000000001023</td><td>Оценка - валидация СН</td><td>→</td><td>Анализ</td>
</tr>
    <tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001946</td><td>Недоступность функций из-за исчерпания ресурсов на виртуальном сервере</td><td>→</td><td>Отказ виртуального сервера</td>   
    </tbody>
    </table>
    </div>

→ Ссылка