Flexbox布局固定宽度子元素宽度失效，可折叠第三栏三栏布局如何解决

问题原因 #

1. 你给右栏.right设置了flex-shrink: 1，flex布局下父容器空间不足时，flex-shrink为1的元素会自动收缩，导致你设置的flex-basis: 600px以及内部子元素的固定宽度都会被压缩失效。
2. 你的实现思路是通过子元素宽度控制右栏宽，但当前.right的flex配置不会自动适配子元素宽度，所以修改.child的宽度不会作用到父级右栏的宽度上。

解决方案 #

有两种实现方式可选，根据使用场景挑选即可：

方式1：保留通过子元素控制右栏宽度的逻辑

修改.right的flex配置，让它不伸缩、宽度自适应内容：

.right {
  flex: 0 0 auto; /* 等价于 flex-grow:0; flex-shrink:0; flex-basis:auto */
  overflow-x: auto;
  border: 1px solid green;
}

之后切换折叠状态只要修改.child的width属性即可：

/* 折叠状态 */
.right.collapsed .child {
  width: 100px;
}
/* 展开状态 */
.right.expanded .child {
  width: 600px;
}

方式2：直接控制右栏本身宽度（更简单，不需要依赖子元素）

不需要修改.child的样式，直接切换.right的flex基础宽度即可：

.right {
  flex-shrink: 0;
  flex-grow: 0;
  overflow-x: auto;
  border: 1px solid green;
}
/* 折叠状态 */
.right.collapsed {
  flex-basis: 100px;
}
/* 展开状态 */
.right.expanded {
  flex-basis: 600px;
}

两种方式修改后都能保证右栏宽度严格符合设置，不会被自动压缩。

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