如何实现Div超出视口后按2列一组垂直换行排列？

问题分析 #

你当前使用writing-mode: vertical-lr实现垂直排列，但该属性会让元素沿垂直方向持续延伸，导致横向滚动条出现，无法实现超出视口后向下换行的需求。我们需要调整布局方式，用Flexbox来实现每列2个div、列自动换行的效果。

修改后代码 #

HTML（调整结构，将每2个container分组为列） #

<link rel="stylesheet" href="style.css">
<h2> Start</h2>
<div class="page">
  <div class="vertical">
    <div class="column">
      <div class="container"><h3 class="text">1</h3></div>
      <div class="container"><h3 class="text">2</h3></div>
    </div>
    <div class="column">
      <div class="container"><h3 class="text">3</h3></div>
      <div class="container"><h3 class="text">4</h3></div>
    </div>
    <div class="column">
      <div class="container"><h3 class="text">5</h3></div>
      <div class="container"><h3 class="text">6</h3></div>
    </div>
    <div class="column">
      <div class="container"><h3 class="text">7</h3></div>
      <div class="container"><h3 class="text">8</h3></div>
    </div>
    <div class="column">
      <div class="container"><h3 class="text">9</h3></div>
      <div class="container"><h3 class="text">10</h3></div>
    </div>
  </div>
</div>

CSS（用Flexbox实现列排列与自动换行） #

.page {
    width: 100vw;
    height: 1500px;
}

.vertical{
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap; /* 列超出视口宽度时自动换行 */
    gap: 50px; /* 控制列之间的间距 */
    padding: 50px;
    box-sizing: border-box;
    background-color: gray;
    border-top: 2px solid black;
    overflow-y: auto; /* 内容过多时纵向滚动 */
}

.column {
    display: flex;
    flex-direction: column;
    gap: 50px; /* 控制列内两个container的上下间距 */
}

.container{
    width: 350px;
    height: 350px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text {
    font-size: 60px;
}

关键改动说明 #

1. HTML结构调整：新增.column容器，将每2个.container分组，确保每列固定2个元素。
2. Flexbox布局：
   • .vertical设为flex容器，flex-wrap: wrap实现列超出视口时自动换行，彻底避免横向滚动条。
   • .column设为纵向flex容器，让组内的2个.container垂直排列。
3. 间距优化：用gap替代margin控制元素间距，布局更简洁可控。
4. 内容溢出处理：设置overflow-y: auto，当总内容高度超出视口时，允许纵向滚动查看剩余内容。

内容的提问来源于stack exchange，提问作者Beto