如何防止100%高度的div超出父容器？

你的问题出在flex布局的高度设置和对齐逻辑上，下面是具体的调整方案：

核心问题分析 #

• .wrapper 用了 justify-content: center，同时子元素 .list-container 设了 height: 100%，加上页面里的标题和按钮栏，总高度会超出视口，直接导致外层容器滚动。
• .list 用 height: 100% 但父元素是flex列布局，没有限制剩余空间，内容变多的时候会直接撑开容器，而非触发内部滚动。

修改后的CSS代码 #

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

header {
  text-align:center;
  position: fixed;
  width: 100%;
  border: 1px black solid;
  height: 30px;
}

.wrapper {
    height: 100%;
    width: 100%;
    border: 1px red solid;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 移除垂直居中，避免子元素撑开容器 */
    box-sizing: border-box;
}

h3 {
    margin-right: 20px;
    margin-bottom: 10px;
}

.list-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    width: 50%;
    /* 用flex-grow占用wrapper剩余空间，替代固定100%高度 */
    flex-grow: 1;
    /* 确保flex子元素能正确限制内部高度 */
    min-height: 0;
}

.list {
    /* 让列表占用容器剩余空间 */
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px black solid;
    /* 内容过少时保持基础高度 */
    min-height: 100px;
}

.btn-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
}

修改后的HTML代码 #

<header>header</header>
<div class="wrapper">
  <h3>my list</h3>
  <div class="list-container">
    other stuff
    <div class="list">
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <!-- 可添加更多列表项测试 -->
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
    </div>
  </div>
  <div class="btn-wrapper">
    <button>btn1</button>
    <button>btn2</button>
  </div>
</div>

关键修改说明 #

1. 移除.wrapper的justify-content: center：这个属性会强制子元素垂直居中，当子元素总高度超出视口时，会直接撑开外层容器导致页面滚动。
2. .list-container改用flex-grow:1：让它自动填充标题和按钮之外的剩余空间，同时min-height:0确保flex子元素能正确约束内部内容高度。
3. .list用flex-grow:1替代height:100%：让列表占用容器内除"other stuff"外的所有剩余空间，内容过多时只会触发内部滚动，不会再撑开整个容器。

调整后，无论列表项数量多少，外层页面都不会滚动，只有列表容器内部会出现滚动条。

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