Flexbox布局中如何固定某div宽度，让其他div自适应伸缩

嘿，我来帮你搞定这个Flex布局下固定宽度元素被压缩的问题！

你遇到的核心问题是Flex容器的默认行为——flex子元素默认会设置flex-shrink: 1，也就是当容器空间不足时，子元素会自动收缩来适应容器宽度，这就导致你设置了固定宽度的.panel被压缩了。

要让.panel保持固定宽度不被压缩，你只需要给它添加flex-shrink: 0属性，或者更简洁地用flex: 0 0 225px（这个属性是flex-grow:0、flex-shrink:0、flex-basis:225px的缩写，意思是不放大、不收缩、基准宽度225px）。

另外还要注意，你给.panel设置的float: left和display: inline-block在Flex布局里是多余的，甚至可能干扰布局，建议去掉这些属性。

修改后的.panel样式代码如下：

.panel {
  height: 100%;
  flex: 0 0 225px; /* 关键：固定宽度且禁止伸缩 */
  background-color: white;
  border-right: 1px solid lightgrey;
  position: relative;
  outline: solid red 1px;
}

这样设置后，.panel就会严格保持225px的宽度，不会被Flex容器压缩，同时其他采用百分比布局的子元素可以正常在剩余空间里分配宽度，完美保留你想要的原有外观。

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