设置flex-shrink后Flex项目无法缩小的问题求助

算力阿峰

2026-7-4

Flex项目无法收缩的修正方案

问题

想要缩小Flex项目，但设置flex-shrink属性后没有效果，调整父元素.row的vh/vw值、项目内外边距也没用。

原因

flex-shrink生效条件未满足：该属性仅在所有Flex项目的总宽度超过父容器宽度时才会触发收缩逻辑，当前项目总宽度可能未超出.container的70vw范围。
最小宽度限制：Flex项目默认min-width: auto，会以内容（含padding、文字尺寸）的宽度作为最小宽度下限，即使设置flex-shrink，项目也无法收缩到这个下限以下。当前.col的padding:50px和h1的font-size:30px共同构成了项目的最小宽度，限制了收缩。

修正步骤

给.col添加min-width: 0，打破内容的最小宽度限制，允许项目收缩到更小尺寸。
减少内边距与字体大小，给项目留出收缩空间，同时确保flex-shrink的比例差异能体现。
设置flex-basis给项目一个基准宽度，让总宽度超出父容器，触发flex-shrink的收缩逻辑。

修改后的CSS代码

body {
  background-color: #a09b9b;
}
body .container {
  border: 2px solid green;
  width: 70vw;
}
body .container .row {
  display: flex;
  flex-flow: row nowrap;
  height: 25vh;
}
body .container .row .col:nth-child(1) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(2) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(3) {
  flex-shrink: 3;
}
body .container .row .col:nth-child(4) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(5) {
  flex-shrink: 1;
}
body .container .row .col {
  background-color: red;
  border: 1px solid black;
  margin: 0;
  padding: 10px;
  height: 20%;
  min-width: 0;
  flex-basis: 20%;
}
body .container .row .col .container--box__text {
  font-size: 18px;
  margin: 0;
}