Using react and react-bootstrap, stop components from moving to next row when window is resized to be smaller

Forgetting that this defeats the purpose of bootstrap, is it possible to fix rows so that components are not moved to the next row when windows are resized smaller? This will make sure that components all stay on the same row, and if the contents of the row exceed the width of the screen then a scroll bar on the browser will appear. I'd like to achieve this behavior without having to use a fixed px width.

Some test code:

App.js

import './App.css';
import { Image } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="App">
      <div className="Test1">
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
      </div>
      <div className="Test2">
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
      </div>
    </div>
  );
}

export default App;

App.css

.Test1 {
  background-color: blue;
  width: 1500px;
}

.Test2 {
  background-color: red;
  width: "100%";
}

The goal is to get the behavior of <div className="Test2"> to match the layout and behavior of <div className="Test1"> without using a fixed px width.

I have not provided all the runnable code, just the important code. Result:

This image shows the result of the code above. Note that the first row is fixed. To see the entire row, you'll have to scroll in the browser horizontally. The second row adapts to the size of the window.