table元素不支持max-height，因属表格格式化上下文，浏览器依规范忽略该属性；须用div包裹并设max-height和overflow:auto才能实现局部滚动。
table 元素直接设 max-height 为什么没用
因为 table 是表格格式化上下文（table formatting context），CSS 规范明确禁止它响应 max-height ——浏览器会直接忽略。你看到表格撑开，不是 bug，是标准行为。
常见错误包括：
-
table { max-height: 300px; overflow: auto; }→ 完全无效 -
tbody { max-height: 300px; }→ 同样被忽略，tbody不是块级容器 - 父容器没设高度，却写
max-height: 50%→ 百分比失效，结果是none
真正起效的前提只有一个：目标元素必须是块级、有明确高度上下文的容器，且不能是原生表格元素本身。
怎么让 div 包裹的 table 实现局部滚动
必须用 div 套一层，对这个 div 设 max-height 和 overflow：
立即学习“前端免费学习笔记（深入）”；
<div class="table-container">
<table>
<thead><tr><th>Name</th></tr></thead>
<tbody><tr><td>Alice</td></tr></tbody>
</table>
</div>
.table-container 样式要点：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
max-height: 400px—— 必须是具体值或基于有高度父容器的百分比 -
overflow: auto—— 仅内容溢出时才显示滚动条；用scroll会强制显示空滚动条 - 如果要隐藏横向滚动，加
overflow-x: hidden -
border-collapse: collapse要写在table上，否则边框叠加可能让视觉高度超标
绝对定位元素里怎么限制内容滚动高度
比如弹窗卡片 .card 是 position: absolute，内部需要固定头部 + 可滚动内容区，关键在于不能依赖文档流继承高度。
正确做法是让 .card 成为 flex 容器：
-
display: flex+flex-direction: column - 头部（如
.header）不设 flex，自然包裹 - 内容区（如
.content）设flex: 1或max-height: 300px+overflow-y: auto - 父容器（如
.parent）必须有明确高度，例如height: 100vh，不能是height: auto
漏掉任意一点，max-height 都不会触发滚动。
select 下拉菜单能用 max-height 限高吗
不能。select 的下拉弹层是操作系统级 UI，脱离文档流，所有 CSS（包括 max-height、overflow）都进不去。
唯一跨浏览器有效的原生方案是 size 属性：
-
<select size="5"></select>→ 展开后最多显示 5 行选项，多余可滚 -
size="1"等效于默认下拉（即点击展开模式） - 注意：
size会让select渲染成多行控件，失去“点击展开”交互，适合固定展示场景 - 如需点击展开 + 限高，必须用
div+ul自定义下拉，无法绕过
移动端尤其要注意：iOS Safari 对 size 支持不稳定，常强制走全屏选择器，这时候 JS 方案几乎是唯一出路。
