CSS问题：Todo卡片内容溢出时拉伸页面而非自身滚动

我正在开发一个小型生产力中心，每个卡片作为仪表盘的不同模块。其中Todo卡片（第4个卡片）在添加更多内容时会拉伸整个页面，而非仅自身滚动。刚接触CSS，以下是相关信息：

正常布局效果：仪表盘分为6个卡片区域，第4个卡片为垂直布局的Todo模块。
内容溢出后效果：Todo卡片内容过多，导致整个页面被向下拉伸，超出视口范围。

原代码片段 #

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main {
  background-color: red;
  display: grid;
  padding: 25px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "c1 c2 c3"
    "c4 c5 c5"
    "c4 c5 c5";
  gap: 20px;
  flex: 1;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.card {
  background-color: black;
  border-radius: 10px;
}

.card:nth-child(4) {
  grid-area: c4;
  display: flex;
  flex-direction: column;
  align-items: stretch; 
  height: 100%;
  width: 100%;
  overflow: hidden;
}

问题原因 #

1. 网格行用1fr定义高度时，当卡片内容超出，网格行会被内容自动撑开，直接导致整个页面拉伸。
2. Todo卡片仅设置了overflow:hidden，但没有为内部可滚动的内容区域单独分配空间，无法触发内部滚动逻辑。

修复方案 #

1. 限制网格行高度：将.main的grid-template-rows改为minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)，确保网格行不会因内容溢出而被撑开，保持原布局比例。
2. 添加内部滚动容器：在Todo卡片内部，给承载待办事项的子容器（例如.todo-content）设置flex:1和overflow-y:auto，让内容超出时在卡片内部滚动。

修改后的完整代码 #

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main {
  background-color: red;
  display: grid;
  padding: 25px;
  grid-template-columns: 1fr 1fr 1fr;
  /* 使用minmax(0,1fr)固定网格行高度，避免被内容撑开 */
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "c1 c2 c3"
    "c4 c5 c5"
    "c4 c5 c5";
  gap: 20px;
  flex: 1;
  /* 移除min-height:100vh，依赖flex:1即可占满父容器剩余空间 */
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.card {
  background-color: black;
  border-radius: 10px;
}

.card:nth-child(4) {
  grid-area: c4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* 为Todo卡片的内容容器添加滚动能力 */
.card:nth-child(4) .todo-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px; /* 可选，优化内容与卡片边缘的间距 */
}

关键说明 #

• minmax(0, 1fr) 是核心：它强制网格行保持设定的比例，即使内容超出也不会拉伸行高。
• 内容容器必须设置flex:1：让它占满卡片的剩余垂直空间，这样overflow-y:auto才能生效，实现内部滚动。

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