Невозможно заставить полосу прокрутки работать на нижней полосе прокрутки ⇐ CSS

[Anonymous]

Каждый раз, когда я добавляю свойство в элемент div overflow-x: auto, полоса добавляется только с правой стороны.

Я добавил scrollbar-gutter: стабильный в div с помощью overflow-x: auto и ожидал, что желоб будет добавлен внизу, но он был добавлен только в правая сторона.

Вот минимально воссоздаваемый сценарий: кнопки «Скрыть» и «Показать» предназначены только для того, чтобы увидеть, что он не работает должным образом: https://jsfiddle.net/5mc9vqwg/65/
Моя цель — поддерживать соответствие между меткой и вводом. Общий внешний вид не может измениться, поскольку у нас есть клиент, который этого хочет.
Хорошо, метки соответствуют входным данным: https://i.stack.imgur.com/kOk3C.png
Плохо, метки смещены, потому что все сдвигается полосой прокрутки: https://i.stack.imgur.com/ynl3W.png

Моя идея заключалась в том, чтобы добавить нижнюю полосу прокрутки к обеим частям (меткам и полям ввода), чтобы всегда было одинаковое расстояние внизу, даже когда полоса прокрутки отображается/скрывается.

Мой текущий обходной путь — выполнить x-преобразование на 180 градусов для контейнера, а затем для непосредственного дочернего элемента, что по сути помещает нижнюю полосу прокрутки вверху. Таким образом, когда его сдвинут вниз, мои метки выравнивания конца не совпадут с входными данными.
вводная метка 1 вводная метка 2 метка ввода 3 информация о товаре 1
информация о товаре 2
информация о товаре 3 информация о товаре 1
информация о товаре 2
информация о товаре 3 информация о товаре 1
информация о товаре 2
информация о товаре 3 информация о товаре 1
информация о товаре 2
информация о товаре 3 информация о товаре 1
информация о товаре 2
информация о товаре 3 информация о товаре 1
информация о товаре 2
информация о товаре 3 скрыть показать @for $i от 0 до 16 { .gap-#{$i} { пробел: #{$i * 4}#{"px"} !important; } } @for $i от 0 до 16 { .pb-#{$i} { отступ-дно: #{$i * 4}#{"px"} !important; } } @for $i от 0 до 16 { .pa-#{$i} { дополнение: #{$i * 4}#{"px"} !important; } } .d-flex { дисплей: гибкий; } .flex-столбец { гибкое направление: столбец; } .flex-shrink-0 { гибкое сжатие: 0 } .flex-shrink-1 { гибкая термоусадка: 1 } .justify-end { justify-content: flex-end; } $repeated-section-width: 170 пикселей; .repeated-section-width { ширина: $repeated-section-width; } функция скрыть() { for (пусть el of document.querySelectorAll('.hide-me')) el.style.display = 'none'; } функция шоу() { for (пусть el of document.querySelectorAll('.hide-me')) el.style.display = 'unset'; }