我看了你的代码，当前实现有几个地方需要调整才能满足你的要求，咱们一步步来修正：

当前实现的问题点 #

• 没有让整个布局（从html到main）占满视口高度，导致aside无法达到全屏高度
• footer用position:absolute会脱离文档流，可能覆盖main的内容
• aside里的三个子元素用justify-content:space-between只是分散排列，不是均匀拉伸，且第三个元素的max-height设置不符合需求（你要的是40%而不是50%）

修正后的完整代码 #

CSS代码 #

html, body {
  margin: 0;
  padding: 0;
  height: 100vh; /* 让根元素占满视口高度 */
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 容器占满视口 */
}

header {
  background-color: lightblue;
}

footer {
  background-color: lightblue;
  width: 100%;
}

ul li {
  display: inline-block;
}

main {
  display: flex;
  flex: 1; /* 让main占满container剩余的空间 */
}

aside {
  background-color: lightgreen;
  width: 30%;
  display: flex;
  flex-direction: column;
}

.center-column {
  background-color: lightpink;
  width: 40%;
}

.first-part, .second-part {
  flex: 1; /* 前两个元素均匀拉伸，平分可用空间 */
  overflow-y: scroll;
}

.third-part {
  max-height: 40%; /* 最大高度不超过父容器的40% */
  overflow-y: scroll;
  flex-shrink: 0; /* 防止被压缩 */
}

HTML代码 #

<div class="container">
  <header>
    <ul>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
    </ul>
  </header>
  <main>
    <aside>
      <div class="first-part"> 
        这里可以放大量文本测试滚动：Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit.
      </div>
      <div class="second-part"> 
        这里可以放大量文本测试滚动：Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit.
      </div>
      <div class="third-part"> 
        这里可以放大量文本测试滚动：Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit.
      </div>
    </aside>
    <div class="center-column"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde pariatur possimus eligendi, voluptatem ab id molestiae dolorem obcaecati eaque omnis sit est facere enim tenetur doloremque! Obcaecati magnam consequatur velit. </div>
    <aside> right column </aside>
  </main>
  <footer>
    <ul>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
      <li>Some link</li>
    </ul>
  </footer>
</div>

关键调整说明 #

1. 全屏高度保障：给html、body、.container设置height:100vh，同时.container用flex-direction:column让header、main、footer垂直排列，main设置flex:1占满剩余空间，确保三列的容器（aside）能达到全屏高度。
2. 子元素均匀拉伸：aside内部用flex-direction:column，前两个子元素设置flex:1，这样它们会自动平分aside的可用空间（减去第三个元素的高度），实现从上到下均匀拉伸。
3. 第三个元素的高度限制：给.third-part设置max-height:40%（相对于父容器aside的高度），同时flex-shrink:0防止它被压缩，加上overflow-y:scroll实现内容超出时滚动。
4. footer布局修正：去掉position:absolute，让footer作为flex容器的一部分正常排列，避免覆盖main内容。

这样调整后，就能完全满足你的需求啦！

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