CSS flex布局错误收缩指定元素 如何实现固定宽度+自适应布局

问题核心原因 #

• 错误使用不存在的display: flex-box属性，该属性无任何作用可直接删除
• .main的宽度用了和视口宽度绑定的vw单位计算，本身就会随页面宽度变化，自然无法实现固定宽度的效果
• .right默认继承flex子项的min-width: auto规则，会被内部固定宽度的.right-content撑开为至少240px，无法自适应收缩

调整方案 #

1. 给.main设置固定的flex-basis值（可替换为你实际需要的固定宽度），配合flex-shrink: 0保证不会收缩
2. 给.right添加min-width: 0，解除内容对容器的最小宽度限制，保证可以正常自适应填充剩余空间
3. 移除所有无效的display: flex-box属性

修改后完整代码 #

.container {
  display: flex;
  height: 300px;
}

.main {
  /* 0表示不放大、0表示不收缩，后面的数值替换为你需要的黄色盒子固定宽度 */
  flex: 0 0 300px;
  background-color: #ff0;
  margin-right: 10px;
}

.right {
  border: 1px solid #f00;
  flex: 1;
  /* 解除内容最小宽度限制，允许容器自适应收缩 */
  min-width: 0;
}

.right-content {
  width: 240px;
  height: 100%;
  background-color: #f00;
}

<div class="container">
  <div class="main">
  </div>
  <div class="right">
    <div class="right-content">
    </div>
  </div>
</div>

如果你的需求里黄色盒子的固定宽度确实需要和视口绑定，那保留原来的calc(100vw - 822px)作为.main的flex-basis值即可，只要保证flex-shrink: 0就不会被收缩。

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