0

I have a parent div with the following CSS

.container {
    display: flex;
    flex-wrap: wrap-reverse;
    overflow-y: scroll;
    height: 100vh;
}

and a couple of children with CSS of

.item {
    padding: 100px;
    margin-bottom: 10px;
    width: 100%;
    height: 200px;
}

Used with the JSX ( React )

<div className="container">
            <div className="item">item 1</div>
            <div className="item">item 2</div>
            <div className="item">item 3</div>
            <div className="item">item 4</div>
            <div className="item">item 5</div>
            <div className="item">item 6</div>
            <div className="item">item 7</div>
            <div className="item">item 8</div>
            <div className="item">item 9</div>
            <div className="item">item 10</div>
        </div>

on Chrome Desktop items will overflow and parent gets scrollable, but on Chrome Mobile (iOS) it does not getting scrollable even with overflow-y: scroll;

I tried adding -webkit-overflow-scrolling: touch; along with max-height to .container's CSS but it didn't solve the problem.

Mahmood Bagheri
  • 184
  • 7

1 Answers1

0

Your code uses className and that is not what is used in HTML to reference a CSS class and that is why the css is not being interpreted by the browser. You should use class instead, as follows:

<div class="container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
    <div class="item">item 9</div>
    <div class="item">item 10</div>
</div>
Ahmad Alhussain
  • 3
  • 2