Overflow(scroll)及Div重叠问题：实现任务卡片在main标签内滚动

一、实现任务卡片在main内垂直滚动的修改方案 #

当前布局核心问题是#screen未通过弹性布局合理分配nav和main的空间，导致main高度溢出与nav重叠，同时固定的grid行数限制了卡片数量。以下是修改后的代码：

修改后的CSS #

body {
  background: none !important;
}

* {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: rgb(9, 9, 9);
}

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

#nui {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(240, 240, 240);
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen {
  width: 65%;
  height: 70%;
  background-color: white;
  border: 1px solid rgb(228, 228, 228);
  border-radius: 15px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  /* 新增：用flex布局分配nav和main的垂直空间 */
  display: flex;
  flex-direction: column;
}

nav {
  max-height: 7.5%;
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 1px solid rgb(228, 228, 228);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 固定nav高度，不被压缩 */
  flex-shrink: 0;
  padding: 0.5rem 0;
}

#profile {
  width: 13%;
  margin-left: 1%;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(228, 228, 228);
  border-top: none;
  border-bottom: none;
  cursor: pointer;
}

#profile-picture {
  border-radius: 50%;
}

#name {
  width: 100%;
  text-align: center;
}

#close {
  width: 13%;
  font-size: 30px;
  text-align: right;
  margin-right: 1%;
}

#close>i {
  cursor: pointer;
  color: red;
}

#title {
  font-weight: 600;
}

main {
  /* 修改：用flex:1占满screen剩余空间，替代固定100%高度 */
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* 防止内部元素溢出main */
  overflow: hidden;
  padding: 1rem 0;
}

#tasks {
  width: 97%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 修改：去掉固定3行，自动适配卡片数量 */
  grid-template-rows: auto;
  gap: 1%;
  /* 启用垂直滚动 */
  overflow-y: scroll;
  /* 美化滚动条 */
  scrollbar-width: thin;
}

#tasks::-webkit-scrollbar {
  width: 6px;
}

#tasks::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#tasks::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

#tasks::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.task-card {
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border: 1px solid rgb(228, 228, 228);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* 确保所有卡片高度一致 */
  min-height: 280px;
  padding: 1rem 0;
}

.info {
  width: 92%;
  height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.infoElement {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  font-size: 14px;
  color: rgb(113, 113, 113);
}

.acceptContainer {
  margin-top: 1%;
  width: 92%;
  height: 15%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.accept {
  width: 100%;
  height: 90%;
  border-radius: 5px;
  border: none;
  background-color: rgb(24, 24, 24);
  color: white;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.accept:hover {
  background-color: rgb(47, 47, 47);
}

p {
  padding: 0;
  margin: 0;
}

对应的HTML（结构无需修改，可动态添加1~20个.task-card元素） #

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="nui">
    <div id="screen">
      <nav>
        <div id="profile">
          <img id="profile-picture" src="https://via.placeholder.com/50" alt="mugshot">
          <p id="name">Egil Cujick</p>
        </div>
        <p id="title">GoPostal</p>
        <div id="close">
          <i class="fa-solid fa-xmark"></i>
        </div>
      </nav>

      <main>
        <div id="tasks">
          <!-- 可在此动态添加任务卡片 -->
          <div class="task-card">
            <div class="info">
              <div class="infoElement">
                <div class="label">
                  <p>Area</p>
                </div>
                <div class="value">
                  <p>Downtown</p>
                </div>
              </div>
              <div class="infoElement">
                <div class="label">
                  <p>Distance</p>
                </div>
                <div class="value">
                  <p>10km</p>
                </div>
              </div>
              <div class="infoElement">
                <div class="label">
                  <p>Est. Duration</p>
                </div>
                <div class="value">
                  <p>30 minutes</p>
                </div>
              </div>
              <div class="infoElement">
                <div class="label">
                  <p>Pick-Ups</p>
                </div>
                <div class="value">
                  <p>5</p>
                </div>
              </div>
              <div class="infoElement">
                <div class="label">
                  <p>Drop-Offs</p>
                </div>
                <div class="value">
                  <p>3</p>
                </div>
              </div>
              <div class="infoElement">
                <div class="label">
                  <p>Reward</p>
                </div>
                <div class="value">
                  <p>$50</p>
                </div>
              </div>
              <div class="infoElement">
                <div class="label">
                  <p>XP</p>
                </div>
                <div class="value">
                  <p>100</p>
                </div>
              </div>
              <div class="infoElement">
                <div class="label">
                  <p>Truck</p>
                </div>
                <div class="value">
                  <p>Van</p>
                </div>
              </div>
            </div>

            <div class="acceptContainer">
              <button class="accept">Accept</button>
            </div>
          </div>
          <!-- 更多任务卡片可在此添加 -->
        </div>
      </main>
    </div>
  </div>
</body>

二、设计优化建议 #

• 响应式适配：添加媒体查询，在小屏幕下调整grid列数，避免卡片挤压：

  @media (max-width: 900px) {
    #tasks {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 600px) {
    #tasks {
      grid-template-columns: 1fr;
    }
    #screen {
      width: 95%;
      height: 90%;
    }
  }
  

• 卡片交互增强：添加hover效果提升用户感知：

  .task-card:hover {
    transform: translateY(-3px);
    box-shadow: rgba(149, 157, 165, 0.3) 0px 10px 30px 0px;
    transition: all 0.2s ease;
  }
  

• 信息层级优化：突出关键信息（如Reward、XP）：

  .infoElement:has(.label p:contains("Reward"), .label p:contains("XP")) .value p {
    font-weight: 700;
    color: #2c3e50;
  }
  

• 加载状态提示：若卡片为动态加载，添加加载动画，避免用户等待困惑。

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