min-block-size不是min-height的快捷替代，仅当writing-mode: horizontal-tb时二者等价；垂直书写模式下它控制宽度，rtl布局中仍按块流方向计算，且百分比依赖父容器块级尺寸，兼容性需注意旧版safari。
min-block-size 不是“设置最小高度”的快捷替代，它是逻辑方向下的尺寸控制属性——行为取决于 writing-mode 和 direction，直接当 min-height 用大概率出错。
什么时候 min-block-size 等价于 min-height？
仅当页面使用默认水平书写模式（writing-mode: horizontal-tb）时，block-size 方向才对应物理上的“高度”，此时 min-block-size: 200px 效果≈min-height: 200px。
- 一旦切换为垂直书写（如
writing-mode: vertical-rl），min-block-size就控制“宽度”，而非高度 - 在 RTL 布局（
direction: rtl）下，它仍按块流方向计算，不随文本方向翻转语义 - 浏览器兼容性：Chrome 105+、Firefox 106+、Safari 16.4+ 支持；旧版 Safari 需加
-webkit-min-block-size
min-block-size 的百分比值为什么经常不生效？
和 min-height: 100% 一样，min-block-size: 100% 依赖父容器有明确的块级尺寸（即 block-size 可计算）。但问题更隐蔽：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 父容器若用
display: flex且未设flex-direction: column，其块流方向可能不是预期方向 - 父容器若本身
min-block-size: auto且无显式尺寸，百分比会退化为auto（即无效） - 推荐写法：
min-block-size: 100dvh或min-block-size: 100lvh，避开父级高度依赖
和 min-height 混用会导致意外交互
min-block-size 与 min-height 同时存在时，浏览器取二者中更大的计算结果，但逻辑优先级不透明：
- 若
min-height: 100px+min-block-size: 200px，最终最小块尺寸为 200px（非叠加） - 若
min-height: max-content+min-block-size: 100px，实际表现取决于内容与书写模式，调试困难 - box-sizing 对两者都生效，但
min-block-size在border-box下仍只约束块轴尺寸，不影响内联轴（inline-axis）
真正需要逻辑方向适配时（比如多语言站点支持竖排中文），min-block-size 才有价值；日常开发中，直接用 min-height 更可控——尤其要注意 flex-shrink: 0 和 box-sizing: border-box 这两个常被忽略的配套条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
