Bootstrap card deck with fixed width for each card and with a horizontal scroll

<div class="container mt-3">
    <div class="row" style="overflow-x:scroll; overflow-y: hidden; white-space: nowrap; height: 300px;">
      <div class="col-auto mb-3">

  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
      </div>
    </div>
    </div>

So what I am trying to achieve is having a singular row of multiple cards of same width and height. In the above code what I have done is in a row just pasted 4 instances of a bootstrap card.

To achieve what I want I have tried the following things- 1. Tried using different variation in for columns like "col-lg-3". 2. Tried keeping a fixed width for the cards. 3. Tried using a card deck.

Problem that I am facing is that no matter what I try while arranging the cards in just a row the cards keep arranging each other vertically and not horizontally.

If I use a card deck then the cards align horizontally as I require but then the deck adjusts ALL THE CARDS to fit the screen size by reducing their width. I'd appreciate if anyone can help me with this.