How to create a side scroller with two rows of elements instead of one row?

Question

I am trying to create a side scroller with 2 boxes per visible at a time using flex (One on top and one underneath)

As you can see on the first bunch of boxes below, I have it successfully horizontally scrolling, but I want there to be two rows of boxes in view instead of one row.

.box-flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.box-flex-row > .m4 {
  min-width: 45%;
}




  
    
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
    
  
  
  
    
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
      
        
          
            
              Test
            

            
              Lower test
            
          
        
      
    
  

  
  
    
      Stuff
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor, nibh sit amet ultrices gravida, tortor magna pretium nunc, at ultricies ipsum libero ac mi. Sed a dictum turpis. Integer vitae ante sed neque ultrices congue. Sed euismod
        nunc id magna aliquet dictum id id erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta mauris ut sapien molestie lacinia. Sed ullamcorper purus a lorem porta, et imperdiet mauris imperdiet.
        Nullam sit amet neque nibh. Pellentesque non magna sed diam tincidunt accumsan quis quis magna. Vivamus urna turpis, ornare id malesuada vel, fringilla eget elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Suspendisse posuere mi eget augue scelerisque euismod. Phasellus quis aliquam dolor, et dapibus urna. Proin suscipit et ligula at semper. Ut tristique magna vitae finibus pellentesque. Phasellus tincidunt tortor et sem posuere, et feugiat
        tellus lacinia. Praesent commodo ullamcorper eros quis suscipit. Nam sed justo tortor. Nulla facilisi. Pellentesque ut lacus sit amet lacus mattis aliquet. Morbi eu purus elit. Aenean rhoncus, lectus vitae aliquet fringilla, eros metus fermentum
        metus, vel malesuada arcu turpis non dolor. Curabitur non ex sed est vehicula efficitur. Fusce vel enim in lectus viverra luctus. Fusce ac sapien porttitor, consectetur massa ut, suscipit nulla. Fusce nec massa lobortis, tincidunt ex eget, ultrices
        felis. Vivamus turpis justo, varius vel tincidunt sed, consequat a purus. Aliquam ultrices eros fermentum nunc dignissim, quis maximus eros malesuada. Vivamus non porttitor quam, id efficitur libero. Donec vulputate posuere viverra. Fusce iaculis
        tellus sit amet orci consequat, at sagittis magna rhoncus. Maecenas ac dapibus est, vel auctor lectus. Integer porta lacus dui, eu scelerisque enim iaculis id. Aliquam eget pulvinar nisl. In hac habitasse platea dictumst. Curabitur et rutrum sem.
        Cras viverra pharetra est. Etiam at molestie ipsum. Donec varius pulvinar tortor, in semper lacus. Nunc vel luctus dui. In eu neque et erat eleifend sodales. Pellentesque id ligula sed risus tempor maximus. Quisque turpis felis, condimentum et
        bibendum ac, congue eu arcu. Aenean rutrum ante et dui pharetra, sed mattis risus accumsan. Mauris vulputate venenatis urna, at venenatis purus. In vitae pellentesque arcu. Maecenas fringilla arcu sed dolor sollicitudin, ut aliquet nisi auctor.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dictum lacus et ornare mollis. Suspendisse potenti. Donec eu leo porttitor, ullamcorper arcu at, sagittis augue. Praesent ante urna, pellentesque
        sed interdum in, malesuada sit amet turpis. Mauris imperdiet et ipsum at hendrerit. Nunc facilisis quam eu rutrum cursus. Quisque convallis ante eu ultrices varius. Cras et sapien odio. Morbi quis dui vitae tellus mattis eleifend. Vestibulum posuere
        sapien elit, nec pretium metus pulvinar nec. Aliquam bibendum magna sit amet urna blandit lobortis.

I have also created a CodePen example. Here's a image of how it looks and how I'd like it to look:

Update: Out of the answers below, I was able to create the exact solution I needed: CodePen example

user_3597276 · Answer

You have one flex container with a row of items and horizontal scroll.

You want two rows and horizontal scroll.

So put the two rows in a larger flex container with flex-direction: column.

Give the nested row containers full width.

Add the scroll function to the larger container.

revised codepen

.section {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.box-flex-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.box-flex-row > .m4 {
  min-width: 45%;
}

user_9253172 · Answer

I messed around with it and I think I found a solution. By setting flex: column and height of content to 50%, it'll create two infinite rows. When you want it to display regularly for desktop, set flex: row and set the width of content to 30% with flex: 0 0 30%. Not sure if it's the best way to do it but it's the only way I found that worked.

.scroll-container{
    width: 70%;
    margin: 0 auto;
    height: 250px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-x: scroll;

}
.scroll-content{
    height: 125px;
    width: 100px;
    background-color:rgb(77, 162, 241);
    flex: 0 0 50%;
    margin: 0;
    padding: 0;
    float: left;
    border-right: 1px solid grey;
}

.scroll-content:nth-child(2n+1){
    background-color: rgb(43, 156, 43); 
}

@media only screen and (min-width: 700px){
    .scroll-container{
        overflow-x: unset;
        flex-direction: row;
        width: 700px;
        justify-content: space-between;
    }
    .scroll-content{
        width: 10px;
        flex: 0 0 30%; 
        margin-top: 20px;
    }
}


    Content 1
    Content 2
    Content 3
    Content 4
    Content 5
    Content 6
    Content 7
    Content 8
    Content 9
    Content 10
    Content 11
    Content 12
    Content 13
    Content 14
    Content 15
    Content 16
    Content 17
    Content 18
    Content 19
    Content 20
    Content 21
    Content 22
    Content 23
    Content 24
    Content 25
    Content 26
    Content 27
    Content 28
    Content 29
    Content 30
    Content 31
    Content 32
    Content 33

CodePen Example

user_3597276 · Answer

Since you want two independent rows on mobile screens, and the cards to merge together (as in one container) on larger screens, flexbox may not be the best solution.

CSS Grid may not be the best solution either – you may need JavaScript – but here's a grid concept that you may find useful:

codepen demo

.box-flex-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 45%));
  grid-auto-rows: 100px;
  grid-gap: 10px;
  overflow: auto;
  padding: 10px;
  background-color: lightgray;
}

@media (max-width: 601px) {
  .m4:nth-child(-n + 6) {
    grid-row: 1;
  }
  .m4:nth-child(n + 6) {
    grid-row: 2;
  }
  .box-flex-row {
    grid-template-columns: none;
    grid-auto-columns: 45%;
  }
}

.m4 {
  border: 1px solid gray;
  background-color: lightgreen;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m4:nth-child(-n + 6) {
  background-color: lightgreen;
}

.m4:nth-child(n + 6) {
  background-color: orange;
}

body {
  margin: 0;
}


  
    
      test 1 upper
      test 2 upper
      test 3 upper
      test 4 upper
      test 5 upper
      test 1 lower
      test 2 lower
      test 3 lower
      test 4 lower
      test 5 lower
      test 6 lower

How to create a side scroller with two rows of elements instead of one row?

3 Answers