如何让Flex容器占满宽度时左侧项目更快收缩？

我有一个主Flex容器，包含一行两列（每列本身也是Flex容器）。当水平缩小屏幕时，希望左侧列比右侧列收缩得更快，但设置flex-shrink后并未生效，尝试过调整flex-basis、移除宽度等方法都没用。

问题原因分析 #

• 语法错误：.colRight的flex-shrink属性书写错误，缺少冒号，导致属性无效。
• 最小宽度限制：Flex项目默认有min-width: auto，会被内部内容撑开，即使设置了flex-shrink，列也无法收缩到内容宽度以下。
• 子元素宽度锁定：内部子项设置了固定比例的宽度，限制了父列的收缩空间。

解决方案 #

1. 修复flex-shrink的语法错误，确保属性正确生效。
2. 给左右两列添加min-width: 0，打破默认的最小宽度限制，允许列收缩。
3. 调整内部子元素的布局，让它们能随父列一起收缩，比如使用flex属性代替固定宽度。

修改后的CSS代码 #

/* BASE STYLES */
:root {
  --clr-dark: #0f172a;
  --clr-light: #f1f5f9;
  --clr-accent: #e11d48;
}

*,*::before,*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  word-spacing: 1.4px;
  font-family: "Roboto", sans-serif;
  color: var(--clr-dark);
  background-color: var(--clr-light);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  width: 50%;
  height: 650px;
  margin: 0 auto;
  border: 10px solid var(--clr-dark);
}

.item {
  background-color: #fb7185;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

/* END OF BASE STYLES */
.container {
  display: flex;
  flex-flow: row nowrap;
}

.colLeft, .colRight {
  height: 100%;
  border: 5px solid blue;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  /* 打破最小宽度限制 */
  min-width: 0;
}
.colLeft {
  flex-grow: 1;
  flex-shrink: 10;
}
.colRight {
  flex-grow: 1;
  /* 修复语法错误 */
  flex-shrink: 1;
}

.item-1 {
  flex: 0 1 30%;
  /* 用flex-basis和允许收缩代替固定宽度 */
  width: 100%;
  display: flex;
}

.item-a, .item-b {
  height: 100%;
  /* 让子项能随父元素收缩 */
  flex: 1;
}

.item-2 {
  flex: 0 1 55%;
  width: 100%;
}
.item-3 {
  flex: 0 1 55%;
  width: 100%;
}
.item-4 {
  flex: 0 1 30%;
  width: 100%;
}

修改后的HTML代码 #

<div class="container">
  <div class="colLeft">
    <div class="item item-1">
      <div class="item item-a">1a</div>
      <div class="item item-b">1b</div>
    </div>
  
    <div class="item item-2">2</div>
  </div>
  <div class="colRight">
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
  </div>
</div>

关键修改说明 #

• 给.colLeft和.colRight添加min-width: 0：允许Flex项目收缩到内容宽度以下，是flex-shrink生效的关键前提。
• 修复.colRight的flex-shrink: 1语法：确保属性被正确解析。
• 将内部子项的固定width改为flex: 1或允许收缩的flex属性：让子元素能随父列一起收缩，不再限制父列的宽度。

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