Bootstrap Cards Horizontal Scroll-CodePudding

I want to horizontally scroll cards using bootstrap V.5 like below

 <div >
    <div  style="overflow: auto;">
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>

I saw a lot of working examples, but its not scrolling in my page ? I really donot know what is wrong here! Any help will be much appreciated

CodePudding user response：

As Esger comments below change solve the issue

<div  style="overflow: auto;">
        <div  >
            <div  style="min-width: 300px;">Card</div>
            <div  style="min-width: 300px;">Card</div>
            <div  style="min-width: 300px;">Card</div>

CodePudding user response：

<div  style="overflow: auto;">
    <div  >
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        <div  style="min-width: 300px;">Card</div>
        </div>
        </div>

Does this fix your issue?