直接用flex-col+h-full不能保证等高，因父容器若无明确高度（如h-screen、min-h-0），则随内容伸展，导致各列高度不一；解决关键是外层设可参照高度基准，列用flex-1+min-h-0。
为什么直接用 flex-col + h-full 不能保证所有列等高
当容器是 flex flex-row，子列为 flex-col h-full 时，各列高度由其自身内容撑开，h-full 只会继承父容器的“计算后高度”——而父容器若没设明确高度（如 h-screen 或 min-h-0），它就随内容自然伸展，导致列高不一致。常见现象是：一列有 10 条日程，另一列只有 2 条，视觉上明显参差。
解决的关键不是给每列加 h-full，而是让整个多列容器有一个**可参照的高度基准**：
- 外层 wrapper 必须有明确高度（如
h-[calc(100vh-150px)]或min-h-screen） - 多列容器本身设
flex flex-row，但**不设 height**，让它在 wrapper 内自由布局 - 每列用
flex-1或flex-[1]（而非h-full），配合min-h-0防止 flex 基线溢出 - 若列内需滚动，滚动容器必须是列内部的子元素（如
<div class="flex-1 overflow-y-auto">），而非列本身<h3>grid-cols-* 和 flex-row 在等高场景下的实际差异</h3> <p>用 <code>grid实现等高更“被动可靠”：只要父容器有高度，grid-cols-7 grid-rows-[1fr]或grid-rows-[minmax(0,1fr)]就能强制所有行（即每列）等高；而flex flex-row的等高依赖于align-items: stretch默认行为，一旦某列触发了min-height、border、或子元素用了position: absolute，拉伸就会失效。所以真正需要“视觉上绝对等高+内容可滚动”的周历类布局，推荐：
- 外层：固定高度 +
overflow-y-auto（统一滚动） - 中层：用
grid grid-cols-7 gap-2（无需手动算w-1/7，列宽自动均分） - 内层：每列用
flex flex-col h-full，头部固定，内容区flex-1 overflow-y-auto - 注意加
min-w-0到列上，防止长文本撑破网格轨道
columns-7 为什么不适合做等高多列日历
columns是为流式文本分栏设计的，它的列是“虚拟的”，不对应真实 DOM 结构。你无法单独控制某一列的背景、边框、内边距，也不能给某列加 header 或固定顶部区域——所有样式都作用于整个columns容器，子项只是被浏览器自动切片填入。典型错误现象：
- 加了
columns-7，但列之间没有间距，gap类完全无效 - 试图用
break-inside-avoid防止卡片被劈开，结果整块内容全挤进第一列 - 响应式切换列数（如
sm:columns-2 md:columns-7）时，小屏下内容堆叠错乱，因为 columns 不支持“单列垂直流”回退
简单说：
columns适合博客正文分栏，不适合需要独立交互、样式、滚动控制的多列业务组件。容易被忽略的 min-h-0 和 flex-basis 影响
在嵌套 flex 布局中，如果父容器是
flex flex-col，子元素又是flex flex-row，再往下是多列，这时中间某层没设min-h-0，会导致子 flex 容器的height: 100%计算失败——浏览器认为它“没有高度参考”，于是按内容高度渲染，破坏等高。同理，
flex-[1]和flex-1看似一样，但flex-1编译为flex: 1 1 0%，而flex-[1]是flex: 1 1 0px，后者在某些旧版 Safari 中对百分比高度兼容性更稳。实操建议：
- 所有参与等高计算的 flex 容器，都显式加
min-h-0 - 避免在等高列上用
h-96这类固定高度，改用h-[400px]或相对单位 - 检查 DevTools 的 computed
height和flex-basis，确认是否真被设为0px或0%
- 外层：固定高度 +
