使用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>