'Scroll bar not being displayed on Ionic 5 project but it is visible when replicating the code on stackblitz

What I am trying to create is a horizontally scrolling div with it's scroll bar appearing when applicable. Currently, I am able to allow for horizontal scrolling but for some reason the scroll bar isnt visible.

When I recreate this set of code onto stackblitz (https://stackblitz.com/edit/ionic4-horizontal-scroll-qzvjut?file=pages%2Fhome%2Fhome.html), it works fine in terms of being able to scroll horizontally whilst also displaying the scroll bar when needed.

Code

<ion-content padding>
    <div class="horizontal-scroll">
        <img src="https://www.zoochat.com/community/media/african-lion.474539/full?d=1578593175"/>
        <img src="https://www.zoochat.com/community/media/african-lion.474539/full?d=1578593175"/>
        <img src="https://www.zoochat.com/community/media/african-lion.474539/full?d=1578593175"/>
        <img src="https://www.zoochat.com/community/media/african-lion.474539/full?d=1578593175"/>
    </div>
</ion-content>

.horizontal-scroll {
    display:flex;
    overflow: auto;
}

Can someone tell me what is possibly wrong in the project setting that is causing this?

Ionic Project Result enter image description here

htmlcssmobileionic5


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions