Bootstrap 4 предотвращает отсечение переполненной строки с горизонтальной прокруткой

Как вы сказали, вы хотите, чтобы он реагировал на таблицу, в которой все div по умолчанию имеют равную ширину доступной ширины родителя, тогда вам не следует использовать col-sm-4. Блоки с этим классом будут иметь 33,33% ширины родительского элемента, а другие ваши блоки наверняка не будут видны с этим.

Так что для отзывчивых div вы можете редактировать этот код таким образом. Добавлена ​​ссылка на Codepen здесь.

<div class = "container testimonial-group">
 <div class = "row text-center flex-nowrap">
 <div class = "col">1</div><!--
  --><div class = "col">2</div><!--
  --><div class = "col">3</div><!--
  --><div class = "col">4</div><!--
  --><div class = "col">5</div><!--
  --><div class = "col">6</div><!--
  --><div class = "col">7</div><!--
  --><div class = "col">8</div><!--
  --><div class = "col">9</div>
 </div>
</div>

CSS

/* The heart of the matter */
.testimonial-group > .row {
  white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
  display: inline-block;
  float: none;
 }

 /* Decorations */
.col { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; 
}
.col:nth-child(3n+1) { background: #c69; }
.col:nth-child(3n+2) { background: #9c6; }
.col:nth-child(3n+3) { background: #69c; }

Полосы прокрутки остаются скрытыми — это функция OSX, от которой пользователи должны отказаться, если они хотят, чтобы полосы прокрутки оставались видимыми. Вы мало что можете сделать, чтобы заставить их оставаться видимыми. Но вы можете стилизовать их явно, чтобы хром и сафари показывали, по крайней мере, тогда.

Вы можете протестировать комбинацию Mac Os и Chrome / Safari, так как это проблема конкретной платформы. Затем вы можете переопределить стиль полосы прокрутки. Это вынуждает его показывать.

.testimonial-group > .row {
  overflow-x: scroll;
  white-space: nowrap;
}

.testimonial-group > .row::-webkit-scrollbar-track
{
   box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
   border-radius: 10px;
   background-color: #F5F5F5;
}


.testimonial-group > .row::-webkit-scrollbar
{
  width: 0px;
  height: 12px;
  background-color: #F5F5F5;
}

.testimonial-group > .row::-webkit-scrollbar-thumb
{
   border-radius: 10px;
   box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #555;
}

Вам необходимо переопределить цвета и поведение полосы прокрутки по умолчанию.

.row {
  overflow-x: scroll;
  scroll-behavior: smooth;
  align-items: left;
  justify-content: left;
  flex-direction: row;
}
.col-sm-4 {
 display: inline;
 align-items: left;
 justify-content: left;
}
/*scroll bar style all brwosers expet IE && Firefox*/
::-webkit-scrollbar {
  width: 8px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #787c7d;
}

В противном случае вы могли бы сделать это с помощью JS вместо css.