Flexbox响应式布局问题：元素换行后占满空间且不溢出

你在Flexbox中遗漏了交叉轴方向的拉伸控制以及align-content属性的使用，导致底部面板的宽度无法根据布局自动适配。以下是针对需求的两种可行实现方案：

方案一：修正Flexbox实现（推荐） #

核心思路是利用Flexbox交叉轴的拉伸特性，让底部面板自动适配所在列的宽度，无需手动计算宽度：

.wrapper
  --width-top-left: 20px
  display: flex
  flex-direction: column
  flex-wrap: wrap
  height: 60px
  // 切换为50px查看收缩效果
  align-content: flex-start /* 确保列从左侧紧凑排列，避免分散 */
  
.top-left
  height: 30px
  width: var(--width-top-left)
  flex-shrink: 0 /* 固定宽度，防止被压缩 */
  
.bottom
  height: 22px
  align-self: stretch /* 自动拉伸至所在列的宽度 */
  flex-shrink: 0 /* 固定高度，防止被压缩 */

/* 基础样式保留 */
.wrapper
  border: thin solid goldenrod
  position: relative
.bottom
  background: lightcoral
.top-left
  background: mediumslateblue
.top-right
  position: absolute
  top: 0
  right: 0
  background: mediumseagreen
  height: 20px
  width: 30px

关键逻辑说明： #

1. align-content: flex-start：当容器设置column wrap时，该属性控制多列从左侧开始排列，避免列自动分散占据多余空间。
2. align-self: stretch：让底部面板在水平方向（交叉轴）自动拉伸至所在列的宽度：
   • 初始视图（高度足够）：底部面板与左侧面板在同一列，宽度占满整个容器；
   • 收缩视图（高度不足）：底部面板被挤到第二列，宽度自动变为容器宽度减去左侧面板宽度。
3. flex-shrink: 0：固定面板尺寸，防止容器空间不足时被压缩变形。

方案二：Grid布局实现（更直观） #

如果觉得Flexbox逻辑不够清晰，Grid布局可以通过明确的模板定义实现需求，配合媒体查询控制不同高度下的布局：

.wrapper
  --width-top-left: 20px
  display: grid
  height: 60px
  // 切换为50px查看收缩效果
  gap: 0
  grid-template-columns: var(--width-top-left) 1fr
  position: relative
  border: thin solid goldenrod
  
.top-left
  height: 30px
  background: mediumslateblue
  grid-column: 1 / 2
  grid-row: 1 / 2
  
.bottom
  height: 22px
  background: lightcoral
  grid-column: 1 / -1 /* 初始状态占满所有列 */
  align-self: end /* 固定在容器底部 */
  
.top-right
  position: absolute
  top: 0
  right: 0
  background: mediumseagreen
  height: 20px
  width: 30px

/* 收缩视图适配 */
@media (max-height: 51px)
  .bottom
    grid-column: 2 / -1
    grid-row: 1 / -1

关键逻辑说明： #

• 初始状态：底部面板占据所有列，通过align-self: end固定在容器底部；
• 收缩状态：当容器高度小于左侧面板+底部面板的总高度时，通过媒体查询将底部面板移至第二列，拉伸至容器整个高度并对齐到底部，完全匹配理想收缩视图。

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