页面卡片内容overflow属性不生效问题求助

我在用CSS的overflow属性时遇到了问题，查了很多相关内容还是没解决。我希望卡片被挤压时只有主体内容可以滚动，预期效果是卡片标题和 footer 固定，中间绿色区域滚动，但实际整个卡片会被撑开，overflow没生效。我已经给各元素指定了高度，但还是不行。

预期效果：

实际效果：

相关代码如下：

CSS 代码 #

* { box-sizing: border-box; } 
body { height: 100vh; margin: 0; } 
.page { align-items: center; background-color: orange; display: flex; gap: 1rem; height: 100%; justify-content: center; padding: 2rem; width: 100%; } 
.aside { background-color: blue; height: 2rem; width: 2rem; } 
.card { background-color: blue; max-height: 100%; padding: 1rem; width: 16rem; } 
.card-content { background-color: pink; display: flex; flex-direction: column; height: 100%; } 
.card-body { background-color: green; flex-grow: 1; overflow-y: auto; }

HTML 代码 #

<div class="page"> 
  <div class="aside"></div> 
  <div class="card"> 
    <div class="card-content"> 
      <div class="card-title">TITLE</div> 
      <div class="card-body"> 
        <p> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus. Tellus rutrum tellus pellentesque eu tincidunt. Molestie a iaculis at erat pellentesque adipiscing commodo elit at. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel. Vulputate mi sit amet mauris commodo quis imperdiet. Dui id ornare arcu odio ut sem nulla. Lectus sit amet est placerat in egestas erat imperdiet sed. Quis eleifend quam adipiscing vitae. Egestas sed sed risus pretium. Nulla pellentesque dignissim enim sit. Rhoncus urna neque viverra justo nec. Viverra vitae congue eu consequat ac felis donec. Quis lectus nulla at volutpat. Orci porta non pulvinar neque laoreet suspendisse. 
        </p> 
      </div> 
      <div class="card-footer">FOOTER</div> 
    </div> 
  </div> 
</div>

问题解决 #

问题核心是.card只有max-height: 100%，没有明确的高度约束，导致它会被内部内容撑开，子元素.card-content的height:100%失去参照基准，flex布局和overflow都无法正常工作。

给.card添加height: 100%即可修复：

.card {
  background-color: blue;
  height: 100%; /* 新增这行 */
  max-height: 100%;
  padding: 1rem;
  width: 16rem;
}

这样.card会继承父元素.page的高度（100vh减去padding），.card-content的height:100%就能正确匹配.card的高度，flex布局生效后，.card-body会占据标题和footer之外的剩余空间，超出内容自动触发垂直滚动。

如果希望卡片在内容较少时自动收缩，保留max-height:100%即可，它会限制卡片最大高度不超过父容器，同时允许高度随内容自适应。

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