Как создать боковой скроллер с двумя рядами элементов вместо одного ряда?

Question

Я пытаюсь создать боковой скроллер с 2 ящиками на каждый видимый одновременно, используя flex (один сверху и один снизу)

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

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">

  <div class="section">
    <div class="row box-flex-row">
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <hr>
  <div class="section">
    <div class="row">
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <hr class="hr-bottom-line">
  <div class="section">
    <div class="row">
      <h2>Stuff</h2>
      <p>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.</p>
    </div>
  </div>
  <br><br>
</div>

Я также создал пример CodePen .Вот изображение того, как это выглядит и как я хотел бы, чтобы это выглядело:

Обновление: из приведенных ниже ответов я смогсоздать точное решение, которое мне нужно: CodePen пример

Answer 1

У вас есть один гибкий контейнер с рядом элементов и горизонтальной прокруткой.

Вам нужны две строки и горизонтальная прокрутка.

Поэтому поместите две строки в больший гибкий контейнер с помощью flex-direction: column.

Дайте вложенным контейнерам строк полную ширину.

Добавьте функцию прокрутки к большему контейнеру.

пересмотренный кодовый блок

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">

  <div class="section">

    <div class="row box-flex-row">

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

    </div>

    <div class="row box-flex-row">

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</div>

Answer 2

Поскольку вам нужны две независимые строки на экранах мобильных устройств, а карты объединяются (как в одном контейнере) на больших экранах, flexbox может оказаться не лучшим решением.

Сетка CSS может быть не самой лучшейлибо решение - вам может понадобиться JavaScript - но вот концепция сетки, которая может оказаться вам полезной:

демонстрация codepen

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

<div class="container">
  <div class="section">
    <div class="row box-flex-row">
      <div class="col s12 m4">test 1 upper</div>
      <div class="col s12 m4">test 2 upper</div>
      <div class="col s12 m4">test 3 upper</div>
      <div class="col s12 m4">test 4 upper</div>
      <div class="col s12 m4">test 5 upper</div>
      <div class="col s12 m4">test 1 lower</div>
      <div class="col s12 m4">test 2 lower</div>
      <div class="col s12 m4">test 3 lower</div>
      <div class="col s12 m4">test 4 lower</div>
      <div class="col s12 m4">test 5 lower</div>
      <div class="col s12 m4">test 6 lower</div>
    </div>
  </div>
</div>

Answer 3

Я возился с этим и думаю, что нашел решение.Если установить flex: column и высоту содержимого на 50%, это создаст две бесконечные строки.Если вы хотите, чтобы он регулярно отображался для рабочего стола, установите flex: row и установите ширину контента на 30% с помощью flex: 0 0 30%.Не уверен, что это лучший способ сделать это, но единственный способ, который я нашел, сработал.

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

<div class='scroll-container'>
    <div class='scroll-content'>Content 1</div>
    <div class='scroll-content'>Content 2</div>
    <div class='scroll-content'>Content 3</div>
    <div class='scroll-content'>Content 4</div>
    <div class='scroll-content'>Content 5</div>
    <div class='scroll-content'>Content 6</div>
    <div class='scroll-content'>Content 7</div>
    <div class='scroll-content'>Content 8</div>
    <div class='scroll-content'>Content 9</div>
    <div class='scroll-content'>Content 10</div>
    <div class='scroll-content'>Content 11</div>
    <div class='scroll-content'>Content 12</div>
    <div class='scroll-content'>Content 13</div>
    <div class='scroll-content'>Content 14</div>
    <div class='scroll-content'>Content 15</div>
    <div class='scroll-content'>Content 16</div>
    <div class='scroll-content'>Content 17</div>
    <div class='scroll-content'>Content 18</div>
    <div class='scroll-content'>Content 19</div>
    <div class='scroll-content'>Content 20</div>
    <div class='scroll-content'>Content 21</div>
    <div class='scroll-content'>Content 22</div>
    <div class='scroll-content'>Content 23</div>
    <div class='scroll-content'>Content 24</div>
    <div class='scroll-content'>Content 25</div>
    <div class='scroll-content'>Content 26</div>
    <div class='scroll-content'>Content 27</div>
    <div class='scroll-content'>Content 28</div>
    <div class='scroll-content'>Content 29</div>
    <div class='scroll-content'>Content 30</div>
    <div class='scroll-content'>Content 31</div>
    <div class='scroll-content'>Content 32</div>
    <div class='scroll-content'>Content 33</div>
</div>

Пример CodePen