Flexbox与Grid问题：小屏幕下图片块意外收缩

问题出在哪 #

当.digital__main切换为flex-direction: column后，flex子元素.digital__section的高度计算逻辑发生变化——默认情况下，column方向的flex容器会让子元素高度适配内容，但你的grid容器.digital__list没有明确的高度约束，导致依赖padding-bottom:75%维持宽高比的.digital__img无法获取正确的父元素宽度基准（这个百分比是基于父元素宽度计算的），最终出现过度收缩、内容截断的问题。

试试这几个可行的解决办法 #

办法1：给.digital__section设置flex-basis: 100%并强制撑满宽度 #

在小屏幕断点中，给.digital__section添加以下样式：

@include sm {
  .digital__main {
    flex-direction: column;
  }
  .digital__section {
    flex-basis: 100%;
    width: 100%;
    min-width: 0; // 解除flex子元素的最小宽度限制，避免内容溢出时强制撑宽容器
  }
}

同时确保.digital__list的grid布局占满宽度：

.digital__list {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); // 保留你原有的列配置
  gap: 1rem; // 按需调整网格间距
}

办法2：给.digital__item添加min-height: 0并固定宽度 #

flex容器的子元素默认带有min-width: auto（行方向）或min-height: auto（列方向）的限制，会阻止元素正常收缩。给.digital__item添加以下样式：

.digital__item {
  min-height: 0;
  width: 100%;
}

另外如果.digital__img是背景图或使用img标签，需确保定位正确：

.digital__img {
  position: relative;
  padding-bottom: 75%;
  width: 100%;
  overflow: hidden;
  // 若为背景图
  background-size: cover;
  background-position: center;
  // 若使用img标签
  & img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

办法3：给.digital__main添加align-content: stretch #

在column方向的flex容器中，align-content控制多行内容的对齐方式，设置为stretch会让子元素拉伸填充容器高度：

@include sm {
  .digital__main {
    flex-direction: column;
    align-content: stretch;
    min-height: 100vh; // 可选，让容器至少占满整个视口高度
  }
}

为什么之前的尝试没生效？ #

• 单独设置width:100%：没有解除flex子元素的最小尺寸限制，容器无法正确拉伸或收缩；
• 添加align-items: stretch：这本来就是column方向flex的默认值，但如果子元素未设置flex-basis且flex-grow:0，高度仍会被内容限制；
• 设置min-height:200px：仅强制了最小高度，但未解决宽度基准的核心问题，内容仍可能因宽度不足截断。

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