如何为无固定尺寸表格创建可滚动容器且不触发父级及浏览器滚动条

API 探路者

2026-10-6

问题核心原因

flex布局中默认flex项的min-height/min-width属性值为auto，会随子内容的尺寸自动扩张，即使父容器设置了固定尺寸，内容溢出也会向上传递到父层乃至全局窗口，导致出现额外滚动条。

需修改的CSS规则

直接修改原有对应样式即可，不需要调整HTML结构，也不需要修改表格属性、不需要给滚动容器设置固定宽高：

调整html, body样式，新增overflow: hidden阻断全局溢出：

body, html {
    height:100vh;
    width:100vw;
    max-height:100vh;
    max-width:100vw;
    display:flex;
    flex:1;
    margin:0;
    padding:0;
    overflow: hidden; /* 新增规则 */
}

调整.content样式，新增min-height: 0和overflow: hidden，限制容器高度不会被内容撑开，同时阻断溢出向上传递：

.content {
  display: flex;
  flex-direction:column;
  flex:1 1 auto;
  background-color:#cccccc;
  min-height: 0; /* 新增规则 */
  overflow: hidden; /* 新增规则 */
}

调整.table-container样式，移除原有百分比宽高设置，改用flex: 1 1 auto自动填充父容器剩余空间：

.table-container {
    display:flex;
    flex-direction:column;
    overflow-x:scroll;
    overflow-y:scroll;
    margin:3%;
    background-color:red;
    flex: 1 1 auto; /* 替换原有width、height、max-width、max-height配置 */
}