Overflow-x: auto (реагирующий на таблицу) не работает должным образом с классом flex-nowrap (bootstrap 4): горизонтальная полоса прокрутки таблицы не должна появляться после уменьшения ширины окна до минимально возможного ширина таблицы (полоса прокрутки таблицы появляется намного позже, я думаю, это зависит от ширины левого гибкого контейнера). Вместо ожидаемого поведения правый гибкий контейнер перестает сжиматься, и его содержимое выходит за пределы окна / области (появляется полоса прокрутки окна). Я не ожидал этого и не знаю, как это исправить.
Что мне нужно сделать, чтобы исправить такое поведение?
Изображение показывает проблему
Верхняя часть изображения: содержимое правого контейнера не переполняет окно / область (ширина окна 1250 пикселей).
Центральная часть изображения: содержимое правого контейнера переполнение окно / область (почему? И как это исправить?) И появляется полоса прокрутки окна (ширина окна 998px).
Нижняя часть изображения: полоса прокрутки таблицы появляется только сейчас (ширина окна 928 пикселей).
Вот пример: https://www.codeply.com/go/hKOnFf6iJu (уменьшите ширину окна / области, чтобы увидеть это странное поведение).
Без полосы прокрутки класса flex-nowrap таблица выглядит как положено (но, конечно, правый гибкий контейнер переходит влево после левого гибкого контейнера, если уменьшить ширину окна до 1250 пикселей и ниже), и содержимое страницы не переполняет окно /area.
Удалите здесь «flex-nowrap» и наблюдайте за нормальным поведением переполнения:
<div class="container mr-auto ml-3">
<div class="row flex-nowrap">
<div class="col maincont-sb-empty-area d-none d-md-block">
Кроме того, я обнаружил ту же проблему в другом ответе в другой теме (но я не смог прокомментировать): Столбец фиксированной ширины с контейнером-жидкостью в начальной загрузке
И пример из этой темы: https://www.codeply.com/go/eMXpgvmHAc (уменьшите ширину окна / области, чтобы увидеть, как содержимое переполняет окно / область и полосу прокрутки окна).
Идея состоит в том, чтобы иметь боковое меню с фиксированной шириной (левый контейнер, боковое меню будет с фиксированным положением) и область содержимого с шириной жидкости (правый контейнер). Если ширина окна будет меньше 768 пикселей, то боковое меню будет скрыто и появится «кнопка показа меню». У меня уже есть реализация с таким боковым меню, но ошибка с переполнением окна заметна только сейчас, при вставке широкой таблицы в область содержимого.
Мне не нужны такие боковые панели: https://blackrockdigital.github.io/startbootstrap-simple-sidebar/#, потому что мне нужно показать верхнее меню (верхняя панель навигации) и нижний колонтитул.