Leaflet 地图容器在使用 Flex 布局时因缺乏显式尺寸而坍缩为 0×0，导致地图不可见；根本原因是绝对定位的 Leaflet 元素无文档流内容，而 Flex 默认 flex-shrink: 1 会将其压缩至最小尺寸。解决方案是为 .map 容器显式设置宽度和弹性基础高度（flex-basis），避免依赖 height 或百分比高度。
leaflet 地图容器在使用 flex 布局时因缺乏显式尺寸而坍缩为 0×0，导致地图不可见；根本原因是绝对定位的 leaflet 元素无文档流内容，而 flex 默认 `flex-shrink: 1` 会将其压缩至最小尺寸。解决方案是为 `.map` 容器显式设置宽度和弹性基础高度（`flex-basis`），避免依赖 `height` 或百分比高度。
在响应式 Web 开发中，将 Leaflet 地图嵌入 Flex 布局（尤其在媒体查询中切换为移动端列布局）时，常出现地图“消失”——实际是容器 <div id="map"> 渲染为空白，尺寸为 0px × 0px。这并非 JavaScript 初始化失败，而是 CSS 层面的布局陷阱。
? 根本原因：Flex + 绝对定位的冲突
Leaflet 内部通过 position: absolute 渲染地图图层（瓦片、控件等），其容器 <div id="map"> 本身不产生文档流内容高度。当该容器作为 Flex 子项时：
- 默认 flex-shrink: 1 会强制将其收缩至“最小内容尺寸”；
- 由于无文本、图片等流式内容，最小尺寸即为 0px；
- 即使设置了 width: 100%，height: 100% 或 height: 80vh 在 Flex 容器中也不会生效（除非父容器有明确高度且子项启用 align-items: stretch 并禁用 flex-shrink）。
✅ 正确解决方案：用 flex-basis 替代 height
将 .map 的 CSS 规则从依赖 height 改为基于 Flex 布局的 flex-basis，并确保宽度撑满：
.map {
width: 100%; /* 必须显式设置，否则 flex 无法推导宽度 */
flex-basis: 200px; /* 推荐：固定最小高度，兼容所有设备 */
/* 移除 height、min-height、flex: 1 等可能干扰的声明 */
}若需适配不同屏幕并保持最小可用高度，可使用更健壮的计算方式（需现代浏览器支持）：
.map {
width: 100%;
flex-basis: max(200px, calc(100vh - 260px)); /* 取「200px」与「视口减去头部/侧边栏高度」中的较大值 */
}? 注意：max() 函数在 Safari 15.4+、Chrome 93+、Firefox 110+ 中原生支持；如需兼容旧版 Safari，建议降级为 flex-basis: 200px + min-height: calc(100vh - 260px)（但后者在 Flex 子项中效果有限，仅作兜底）。
? 需移除的危险样式（常见错误）
请检查并删除以下易导致坍缩的 CSS：
/* ❌ 错误：height 在 flex 子项中常被忽略，且百分比高度无效 */
.map { height: 100%; }
/* ❌ 错误：flex: 1 会覆盖 flex-basis，且未设 min-height 时仍可能坍缩 */
.map { flex: 1; }
/* ❌ 错误：position: absolute 直接加在 .map 上（应由 Leaflet 内部管理） */
.map { position: absolute; }✅ 完整推荐配置（适配移动端媒体查询）
/* 移动端默认样式（flex-column 布局） */
@media (max-width: 767px) {
.main-container {
display: flex;
flex-direction: column;
align-items: stretch;
}
.map {
width: 100%;
flex-basis: 300px; /* 移动端建议更高基础高度 */
margin: 16px 0; /* 增加上下间距提升触控体验 */
}
}
/* 桌面端增强样式 */
@media (min-width: 768px) {
.main-container {
display: flex;
flex-direction: row;
}
.map {
width: 100%;
flex-basis: calc(100vh - 260px); /* 桌面端充分利用视口 */
}
}⚠️ 额外注意事项
- 确保父容器为 Flex 容器：.main-container 必须声明 display: flex，否则 flex-basis 不生效；
- 避免多重嵌套 Flex 压缩：检查 .col-8 是否被其他 Flex 规则影响（如你代码中 [class*="col-"] 在移动端全局设为 flex-column，需确认 .main-container 未被意外包裹在另一个 Flex 子项中）；
- JavaScript 初始化时机：确保 L.map('map') 执行时 DOM 已就绪，且容器已获得有效尺寸（推荐在 DOMContentLoaded 或 window.onload 中初始化）；
- 调试技巧：在浏览器开发者工具中选中 #map 元素，查看 Computed 面板中的 height 和 flex-basis 值，确认是否被正确解析。
遵循以上方案，Leaflet 地图将在所有断点下稳定渲染，彻底解决 Flex 布局导致的“消失”问题。
