Сгибайте обертываемые элементы с большей точкой останова, одновременно прокручивая при переполнении

Question

Я пытаюсь приспособить адаптивный дизайн, который имеет горизонтально прокручивающиеся строки различного числа элементов в мобильной точке останова, но который сбрасывает все элементы в одну большую строку переноса на рабочем столе (выровненный по левому краю, без переполнения или прокрутки). У меня есть мобильный телефон, работающий так, как я собираюсь, но я борюсь с рабочим столом.

/*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 */
  &.one {
    .category-flex-item {
      background: #d14124;
    }
  }

  &.two {
    .category-flex-item {
      background: #44a705;
    }
  }

  &.three {
    .category-flex-item {
      background: #008eaa;
    }
  }

  &.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%;
  }
}

<!--HTML-->
<div class="category-flex-wrapper">
          <div class="category-flex-outer-container">
            <h3>Heading 1</h3>
              <div class="category-flex-inner-container one">   
                <div class="category-flex-item">
                 1
                </div>
                <div class="category-flex-item">
                 2
                </div>
                <div class="category-flex-item">
                 3
                </div>
             </div>
          </div>            
          <div class="category-flex-outer-container">
            <h3>Heading 2</h3>
            <div class="category-flex-inner-container two">
              <div class="category-flex-item">
               4
          </div>
          <div class="category-flex-item">
            5
          </div>
          <div class="category-flex-item">
            6
          </div>
        </div>
      </div>            
      <div class="category-flex-outer-container">
        <h3>Heading 3</h3>
        <div class="category-flex-inner-container three">
          <div class="category-flex-item">
            7
          </div>
          <div class="category-flex-item">
            8
          </div>
          <div class="category-flex-item">
            9
          </div>
          <div class="category-flex-item">
            10
          </div>
        </div>
      </div>            
      <div class="category-flex-outer-container">
        <h3>Heading 4</h3>
        <div class="category-flex-inner-container four">
          <div class="category-flex-item">
            11
          </div>
          <div class="category-flex-item">
            12
          </div>
          <div class="category-flex-item">
            13
          </div>
        </div>
      </div>
    </div>

https://jsfiddle.net/Razzle/5hmdLgba/19/

Желаемый дизайн рабочего стола

Answer 1

Если вы просто хотите, чтобы он заполнял буквы и строки за строкой, то это должно быть сделано.

.text-small{
  font-size:14px;
}
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: calc(25% - 20px);
  height: auto;
  margin: 5px;

  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

@media only screen and (max-width: 600px) {
.flex-item{
  width: 100%;
}    
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
  <li class="flex-item">10 <p class="text-small">
  Extend Entire Row to the same max height
  </p></li>
  <li class="flex-item">11</li>
  <li class="flex-item">12</li>
  <li class="flex-item">13</li>
</ul>