如何让<main>元素成为可滚动容器并使内部卡片堆叠换行？

要实现<main>作为可滚动容器，同时让内部卡片自动堆叠换行且保持固定宽高，你需要调整布局样式，以下是具体修改：

核心调整点 #

• 给<main>设置满高并开启滚动，确保它是真正的滚动容器
• 卡片容器改用Flex布局实现自动换行，Grid固定列数无法适配动态换行需求
• 移除无效属性（比如Grid容器里的flex-direction: wrap，这是Flex专属属性）

修改后的完整代码 #

CSS 部分 #

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  color: white;
}

.d1 {
  background: black;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 40px auto;
}

nav {
  border-right: 1px solid rgb(255,255,255,0.4);
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
}

nav>* {
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.top {
  background: #500;
}

.bot {
  background: #055;
}

.circle-btn {
  width: 32px;
  height: 32px;
  background: white;
  border-radius: 32px;
}

/* 调整main为滚动容器 */
main {
  height: 100%;
  overflow-y: auto;
  padding: 1em;
  box-sizing: border-box;
}

/* 卡片容器改用Flex布局实现自动换行 */
.scrollable {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start; /* 卡片顶部对齐，避免拉伸 */
}

.card {
  width: 100px;
  height: 150px;
  border: 1px solid white;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML 部分 #

<div class="d1">
  <nav>
    <div class="top">
      <div class="circle-btn"></div>
    </div>
    <div class="bot">
      <div class="circle-btn"></div>
      <div class="circle-btn"></div>
      <div class="circle-btn"></div>
    </div>
  </nav>
  <main>
    <div class="scrollable">
      <div class="card">1</div>
      <div class="card">2</div>
      <div class="card">3</div>
      <div class="card">4</div>
      <div class="card">5</div>
      <div class="card">6</div>
      <!-- 可添加更多卡片测试换行和滚动 -->
      <div class="card">7</div>
      <div class="card">8</div>
      <div class="card">9</div>
    </div>
  </main>
</div>

效果说明 #

• <main>会占满右侧区域的高度，内容超出时自动显示垂直滚动条
• 卡片会根据容器宽度自动换行，始终保持固定宽高和间距
• align-content: flex-start确保卡片不会因容器高度被垂直拉伸，保持顶部对齐

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