title: Flex wrap items at larger breakpoint, while overflow scrolling at smallest
body: <p>I am trying to accommodate a responsive design that has horizontally-scrolling rows of a varying number of items at the mobile breakpoint, but that dumps all items into one big wrapping row on desktop (aligned left, no overflow or scrolling). I've got mobile working as I intend, but am struggling with desktop.</p>
  <pre><code>/*SCSS*/
  $spacer: 8px;
  $border: 1px solid #c3c1c0;
  
  .category-flex-outer-container {
    margin: ($spacer*2) (-$spacer*4) ($spacer*2) (-$spacer*4);
  
      h3 {
        margin: $spacer*2 $spacer*4;
        position: absolute;
        }
  }
  
  /* testing only */
  .category-flex-item {
    border: $border;
    display: flex;
    margin: $spacer*2;
    padding: $spacer*2;
    text-align: center;
    width: 220px;
  }
  
  /* END testing only */
  
  .category-flex-inner-container {
    background: #fff;
    padding: $spacer*6 $spacer*2 $spacer*2;
    
    /* testing only */
    &amp;.one {
      .category-flex-item {
        background: #d14124;
      }
    }
  
    &amp;.two {
      .category-flex-item {
        background: #44a705;
      }
    }
  
    &amp;.three {
      .category-flex-item {
        background: #008eaa;
      }
    }
  
    &amp;.four {
      .category-flex-item {
        background: #ebbc4e;
      }
    }
    
    /* END testing only */
  }
  
  @media (max-width: 768px) {
    .category-flex-inner-container {
      display: inline-flex;
    }
    
    .category-flex-outer-container {
      overflow: scroll;
    }
  }
  
  @media (min-width: 768px) {
    .category-flex-wrapper {
      display: flex;
      justify-content: space-around;
    }
  
    .category-flex-outer-container {
      width: 20%;
      
      h3 {
        display: none;
      }
    }
  
    .category-flex-item {
      width: 100%;
    }
  }
  
  &lt;!--HTML--&gt;
  &lt;div class=&quot;category-flex-wrapper&quot;&gt;
            &lt;div class=&quot;category-flex-outer-container&quot;&gt;
              &lt;h3&gt;Heading 1&lt;/h3&gt;
                &lt;div class=&quot;category-flex-inner-container one&quot;&gt;   
                  &lt;div class=&quot;category-flex-item&quot;&gt;
                   1
                  &lt;/div&gt;
                  &lt;div class=&quot;category-flex-item&quot;&gt;
                   2
                  &lt;/div&gt;
                  &lt;div class=&quot;category-flex-item&quot;&gt;
                   3
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;            
            &lt;div class=&quot;category-flex-outer-container&quot;&gt;
              &lt;h3&gt;Heading 2&lt;/h3&gt;
              &lt;div class=&quot;category-flex-inner-container two&quot;&gt;
                &lt;div class=&quot;category-flex-item&quot;&gt;
                 4
            &lt;/div&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              5
            &lt;/div&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              6
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;            
        &lt;div class=&quot;category-flex-outer-container&quot;&gt;
          &lt;h3&gt;Heading 3&lt;/h3&gt;
          &lt;div class=&quot;category-flex-inner-container three&quot;&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              7
            &lt;/div&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              8
            &lt;/div&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              9
            &lt;/div&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              10
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;            
        &lt;div class=&quot;category-flex-outer-container&quot;&gt;
          &lt;h3&gt;Heading 4&lt;/h3&gt;
          &lt;div class=&quot;category-flex-inner-container four&quot;&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              11
            &lt;/div&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              12
            &lt;/div&gt;
            &lt;div class=&quot;category-flex-item&quot;&gt;
              13
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/Razzle/5hmdLgba/19/" rel="nofollow noreferrer">https://jsfiddle.net/Razzle/5hmdLgba/19/</a></p>
  <p><a href="https://i.stack.imgur.com/FhwpH.png" rel="nofollow noreferrer">Desired desktop design</a></p>