如何让Flex布局中蓝色项目始终单行显示并压缩红色项目宽度？

当然可以实现这个需求！只需要给两个flex子元素添加几个关键的CSS属性，就能达成你想要的效果——蓝色项目始终单行显示，红色项目自动收缩适配空间。

修改后的完整代码 #

<style>
.flexbox { display: flex; }
.red { 
  background: red; 
  flex-shrink: 1; /* 允许自动收缩，默认值可省略，这里明确写出便于理解 */
  overflow: hidden; /* 可选：防止内容溢出容器 */
  text-overflow: ellipsis; /* 可选：溢出内容显示省略号 */
}
.blue { 
  background: blue; 
  white-space: nowrap; /* 强制文本单行显示 */
  flex-shrink: 0; /* 禁止容器被压缩，确保内容完整显示 */
}
</style>
<div class="flexbox">
  <div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
  <div class="blue">blue blue blue blue blue</div>
</div>

属性作用说明 #

• white-space: nowrap（给.blue）：彻底阻止蓝色容器内的文本换行，无论内容多长都保持单行。
• flex-shrink: 0（给.blue）：告诉flex布局不要压缩蓝色容器的宽度，让它始终能容纳自身的单行文本内容。
• flex-shrink: 1（给.red）：这是flex子元素的默认值，允许红色容器在蓝色容器宽度增加时自动收缩，让出剩余空间给蓝色元素。
• 可选的overflow: hidden和text-overflow: ellipsis：如果红色容器内的文本过长，这两个属性会让溢出的内容被隐藏，并在末尾显示省略号，让界面更整洁，你可以根据实际需求决定是否添加。

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