Горизонтальная прокрутка страницы с помощью flexbox

Question

Я пытаюсь реализовать горизонтальную прокрутку с помощью flexbox. Цель состоит в том, чтобы сделать что-то вроде этого, где вся страница прокручивается по горизонтали, и каждый список также будет прокручиваться по отдельности по вертикали.

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  min-height: 100%;
  min-width: 100%;
  /* flex-wrap: nowrap; */
  overflow-x: scroll;
}

.container::-webkit-scrollbar {
  display: none;
}

.menu {
  height: 100vh;
  flex-basis: 460px;
  min-width: 460px;
  background-color: #F5F5EB;
}

.check-item {
  height: 100vh;
  flex-basis: 528px;
  min-width: 528px;
}

<section class="container">
  <div class="menu"></div>
  <div class="check-item" style="background-color: aqua;"></div>
  <div class="check-item" style="background-color: bisque;"></div>
  <div class="check-item" style="background-color: black;"></div>
  <div class="check-item" style="background-color: blue;"></div>
  <div class="check-item" style="background-color: chartreuse;"></div>
  <div class="check-item" style="background-color: cyan;"></div>
  <div class="check-item" style="background-color: aqua;"></div>
  <div class="check-item" style="background-color: bisque;"></div>
  <div class="check-item" style="background-color: black;"></div>
  <div class="check-item" style="background-color: blue;"></div>
  <div class="check-item" style="background-color: chartreuse;"></div>
  <div class="check-item" style="background-color: cyan;"></div>
</section>

Answer 1

Вы были почти там. В качестве рекомендации для более чистого кода и большей эффективности используйте свойство flex вместо flex-basis и min-width.

С помощью flex вы также можете отключить flex-shrink, что в противном случае могло бы сжать все элементы в ширину контейнера, предотвращая переполнение (т. е. отсутствие полосы прокрутки).

Я также добавил содержимое в дочерний элемент, чтобы проиллюстрировать функцию вертикальной прокрутки.

.container {
  display: flex;
  height: 100vh;
  overflow-x: auto;
}

.menu {
  flex: 0 0 460px; /* flex-grow, flex-shrink, flex-basis */
  background-color: orange; /* switched for demo */
}

.check-item {
  flex: 0 0 528px;
  overflow-y: auto;
}

* {
  margin: 0;
  padding: 0;
}

<section class="container">
  <div class="menu"></div>
  <div class="check-item" style="background-color: aqua;"><span>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></span></div>
  <div class="check-item" style="background-color: bisque;"></div>
  <div class="check-item" style="background-color: black;"></div>
  <div class="check-item" style="background-color: blue;"></div>
  <div class="check-item" style="background-color: chartreuse;"></div>
  <div class="check-item" style="background-color: cyan;"></div>
  <div class="check-item" style="background-color: aqua;"></div>
  <div class="check-item" style="background-color: bisque;"></div>
  <div class="check-item" style="background-color: black;"></div>
  <div class="check-item" style="background-color: blue;"></div>
  <div class="check-item" style="background-color: chartreuse;"></div>
  <div class="check-item" style="background-color: cyan;"></div>
</section>