Таблица React-Bootstrap с «отзывчивой» опорой не имеет прокрутки в проекте Vite ⇐ CSS

[Anonymous]

У меня возникла проблема: моя таблица React-Bootstrap переполняет область просмотра, когда размер экрана меньше, чем он в направлении x. Я превратил это в адаптивную таблицу, используя адаптивную опору. Однако функция overflow-x: прокрутки не работает. Как заставить работать переполнение?
У меня есть стандартный проект Typescript Vite. Единственные файлы, которые я изменил, — это App.tsx на следующий:

Код: Выделить всё

import { Table } from "react-bootstrap";
import "./App.css";
import "./styles.scss";

function App() {
return (

Connected Devices:



IP Address
Protocol
Duration




xxx.xxx.x.xx:xxxxx
 ASCII
00:00:42




);
}

export default App;

и я импортирую CSS React-Bootstrap, используя файл Styles.scss:

Код: Выделить всё

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";

@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/tooltip";

@import "../node_modules/bootstrap/scss/utilities/api";

Результат можно увидеть ниже, когда размер экрана меньше ширины:
[img]https:/ /i.sstatic.net/9nYfOdwK.png[/img]

Другие три варианта: полоска, рамка и наведение работают, но не реагируют.
Я заметил, что селектор, добавленный этой опцией, использует свойство -webkit-overflow-scrolling, которое теперь считается недействительным.
Я использую версию начальной загрузки ^5.3.2 и реакцию-bootstrap ^ 2.9.0, последние версии на момент публикации.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -a-vite-pr