max-width 和 max-height 不能让元素自适应，仅作上限约束；需配合 width: auto 和 height: auto 才能实现随内容或容器变化的自动调整。
max-width 和 max-height 能否让元素“自适应”？
不能直接让元素“自适应”，它们只是上限控制——max-width 和 max-height 不会主动拉伸元素，只在内容或父容器撑大时起约束作用。真正实现“随内容/容器变化而自动调整”的，是配合 width: auto（默认）和 height: auto 使用。
什么时候该用 max-width/max-height？
典型场景是响应式图片、卡片、弹窗等需要防溢出又保留弹性的情况：
- 图片在小屏上不超出容器：设置
max-width: 100%+height: auto - 文字块内嵌长链接或代码片段，防止横向滚动：
max-width: 100%+overflow-wrap: break-word - 模态框限制最大尺寸但允许在大屏下舒展：
max-width: 90vw和max-height: 80vh -
max-height单独用在可折叠区域（如details）时，需配合overflow: hidden才生效
常见踩坑：auto / 100% / none 的区别
这三个值行为差异极大，容易混淆：
-
width: auto：默认值，宽度由内容、padding、border、margin 和父容器共同决定（即“收缩包裹”或“填满可用空间”，取决于 display 类型） -
width: 100%：强制占满父容器的content box宽度，若自身有 padding/border，可能溢出（需box-sizing: border-box） -
max-width: none：显式取消上限（IE 不支持，建议用max-width: unset或max-width: initial） -
max-height对display: inline元素无效；对 flex 子项，需确认父级是否设了align-items: stretch或子项未设align-self
配合 flex/grid 实现真正的尺寸弹性
单靠 max-width 很难完成复杂自适应布局，常需结合现代布局模型：
立即学习“前端免费学习笔记（深入）”；
- Flex 容器中，子项设
flex: 1+max-width: 400px，即可“尽可能伸展但不超过 400px” - Grid 中用
minmax(0, 1fr)配合max-width，解决文本过长导致网格列崩坏的问题 - 注意：
max-width在fit-content或min-contentwidth 下仍会生效，但可能被内容最小尺寸覆盖（比如一个超长单词） - 调试时优先检查 computed styles 中
width和max-width是否同时存在，以及实际生效的是哪个
真正可控的“自适应”，从来不是靠某一个属性单独完成的；max-width 和 max-height 是安全阀，不是驱动器。漏掉 box-sizing、忽略 display 类型影响、或误以为设了 max-width 就等于设置了 width，是最常卡住的地方。
