Leaflet 地图在移动端因 Flex 布局默认收缩行为而高度塌陷为 0，根本原因是 position: absolute 的地图元素无文档流内容，导致 flex 容器无法自动计算高度；需显式设置 flex-basis 或 min-height 并避免依赖百分比高度。
leaflet 地图在移动端因 flex 布局默认收缩行为而高度塌陷为 0，根本原因是 `position: absolute` 的地图元素无文档流内容，导致 flex 容器无法自动计算高度；需显式设置 `flex-basis` 或 `min-height` 并避免依赖百分比高度。
在使用 Flexbox 布局构建响应式页面时，Leaflet 地图（
? 根本原因解析
Leaflet 地图容器内部通过 position: absolute 渲染瓦片和控件，其子元素脱离标准文档流。当该容器作为 Flex 项目（如 .map 应用 display: flex 的父容器下的直系子元素）时，若未显式指定尺寸，Flex 引擎会依据 content-based sizing 规则将其压缩至最小可能尺寸——由于无流内内容支撑，最终宽高均为 0。
此外，以下写法在 Flex 环境中无效：
.map {
height: 50%; /* ❌ 百分比高度在 Flex 项目中不生效 */
}
因为 Flex 项目不继承父容器的 height 用于百分比计算，且 height 属性在 flex 上会被 flex-basis 覆盖。
✅ 正确解决方案
核心原则：为 .map 显式声明尺寸，优先使用 flex-basis + min-height 组合，禁用冲突的 height 和 flex 值。
1. 基础修复（适配所有屏幕）
.map {
width: 100%; /* 横向铺满父容器 */
flex-basis: 300px; /* 主轴初始尺寸（推荐设为合理最小高度） */
min-height: 300px; /* 防止 viewport 过小时被压缩 */
}
2. 响应式增强（结合媒体查询）
/* 移动端：保证最低可视高度 */
@media (max-width: 768px) {
.map {
flex-basis: 40vh; /* 使用视口单位更可靠 */
min-height: 200px; /* 设置安全下限 */
}
}
/* 桌面端：充分利用空间 */
@media (min-width: 769px) {
.map {
flex-basis: calc(100vh - 260px); /* 动态计算，但需兜底 */
min-height: 400px;
}
}
⚠️ 注意：calc(100vh - 260px) 在小屏设备上可能产生负值或极小值（如 100vh = 500px → 240px），因此 min-height 是必备兜底。
3. 关键避坑指南
- 移除冲突声明：确保 .map 不含 height、flex: 1 或 flex-grow: 1（它们会覆盖 flex-basis 并加剧坍缩）。
- 验证父容器：确认 .map 的直接父元素已启用 Flex 布局（display: flex 或 display: inline-flex），且主轴方向为 column（若地图需纵向伸展）。
-
JavaScript 同步：Leaflet 初始化后，若容器尺寸动态变化，需手动触发重绘：
map.invalidateSize(); // 在 resize 或 DOM 变化后调用
? 完整示例（精简版）
<div class="col-8 main-container"> <div class="map" id="map"></div> </div>
.main-container {
display: flex;
flex-direction: column; /* 确保主轴为垂直方向 */
}
.map {
width: 100%;
flex-basis: 40vh;
min-height: 250px;
/* 移除所有 height/flex 相关冗余声明 */
}
// 初始化后确保尺寸生效
const map = L.map('map').setView([45.505, -73.19], 9);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png').addTo(map);
// 页面加载完成或窗口调整时刷新地图尺寸
window.addEventListener('load', () => map.invalidateSize());
window.addEventListener('resize', () => map.invalidateSize());
? 总结
解决 Flex 下 Leaflet 地图消失问题，本质是打破“无内容→零尺寸”的默认行为。通过 flex-basis 提供初始高度基准，辅以 min-height 保障最小可视性，并彻底规避 height 百分比和 flex-grow 的干扰，即可实现跨设备稳定渲染。切记：Flex 项目尺寸必须显式可控，绝对定位内容不构成布局参考。
