如何移除换行Flexbox末尾的无用空白？含React/MUI适配方案

核心问题原因 #

左侧卡片容器被设置为flex: 1（或强制占满父容器可用宽度），导致即使内部卡片换行，容器仍会占据父容器的剩余空间，右侧地图容器只能挤在旁边，从而出现卡片与右侧区域间的黄色间隙。

具体修改步骤 #

1. 调整左侧容器的flex属性
   移除左侧容器的flex: 1设置，改用flex: 0 1 fit-content，让容器宽度完全由内部卡片的实际宽度决定，同时允许容器在空间不足时收缩：

   .left-cards-container {
     flex: 0 1 fit-content;
     overflow-y: auto; /* 保持滚动功能 */
     /* 可选：限制最大宽度，防止卡片过宽挤走右侧地图 */
     max-width: calc(100% - 300px);
   }
   

2. 确保右侧容器宽度自适应
   给右侧地图容器设置flex: 0 0 auto，让其宽度由自身内容决定，同时不会被挤压：

   .right-map-container {
     flex: 0 0 auto;
     /* 可根据需求添加最小宽度，避免地图过小 */
     min-width: 300px;
   }
   

3. React/MUI中的对应实现
   在MUI组件中通过sx属性直接应用样式：

   import Box from '@mui/material/Box';
   
   // 父容器
   <Box sx={{ display: 'flex' }}>
     {/* 左侧卡片滚动容器 */}
     <Box
       sx={{
         flex: '0 1 fit-content',
         overflowY: 'auto',
         maxWidth: 'calc(100% - 300px)'
       }}
     >
       {/* 卡片列表组件 */}
     </Box>
     {/* 右侧固定地图容器 */}
     <Box
       sx={{
         flex: '0 0 auto',
         minWidth: 300px,
         position: 'sticky',
         top: 0, // 实现固定不随滚动移动
         height: '100vh'
       }}
     >
       {/* 地图组件 */}
     </Box>
   </Box>
   

效果说明 #

• 左侧容器宽度将根据卡片的换行情况自动调整，不会再占据多余空间，右侧地图容器会紧贴左侧卡片，消除黄色间隙。
• overflow-y: auto保证左侧卡片数量过多时可以正常滚动。
• 右侧容器的position: sticky配合top:0实现固定不随滚动移动的需求（如果父容器有滚动，需确保父容器没有设置overflow: hidden）。

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