Flex子项收缩内容隐藏问题：实现指定子项始终可见另一子项滚动

这问题我熟，刚好之前处理过类似的flex布局场景😉，核心就是要让info-section始终保住自身内容的显示空间，把收缩的压力全丢给map-section，具体可以按这几步来调整：

步骤1：配置父容器的基础Flex属性 #

先给contact-container设置核心的Flex容器属性，如果需要它占满特定高度（比如视口高度），也可以加上对应的高度值：

.contact-container {
  display: flex;
  /* 按需设置高度，比如占满视口高度就用这个，也可以根据你的布局调整 */
  height: 100vh;
}

步骤2：保护info-section不被压缩 #

默认情况下Flex子元素的flex-shrink是1，空间不足时会被压缩，这就是你看到内容被隐藏的原因。给info-section设置flex-shrink: 0，让它完全拒绝被压缩，始终保持内容所需的最小尺寸：

.info-section {
  flex-shrink: 0;
  /* 可以根据需求加内边距、背景色等样式 */
  padding: 1.5rem;
}

步骤3：让map-section自适应并显示滚动条 #

给map-section设置flex: 1，这等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，意思是它会自动占据父容器剩下的所有空间。再加上overflow: auto，当内容超出容器尺寸时，自动显示滚动条：

.map-section {
  flex: 1;
  overflow: auto;
  /* 注意不要给地图元素设置强制固定宽高，让它自适应这个容器的尺寸 */
}

原理说明 #

• 把info-section的收缩权限锁死，确保它的内容永远不会被挤压隐藏；
• 让map-section承担所有的空间自适应工作，空间足够时占满剩余区域，空间不足时通过滚动条来容纳内容，完美适配你的需求。

内容的提问来源于stack exchange，提问作者radzak