为何flex父容器中设置width:100%会使相邻div收缩？

我并非寻求解决方案，而是想理解背后的原理。以下代码中，我有一个启用flex的div容器，包含两个子元素：第一个子元素明确设置width为18rem，第二个子元素设置width为100%。我原本以为<article>会填充剩余水平宽度，但实际却导致相邻的<nav>宽度收缩。（可对比有无w-full类的运行效果）请问这是为什么？

代码示例 #

CSS代码

.flex {
  display: flex;
}

.w-72 {
  width: 18rem;
}

.w-full {
  width: 100%;
}

.bg-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}

.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
}

HTML代码

<div class="flex">
  <nav class="bg-blue-300 w-72">Nav</nav>
  <article class="w-full bg-orange-200">Article</article>
</div>

原理解析 #

这要从Flex布局的宽度计算逻辑说起：

• width:100%的参照对象是父容器整体宽度
  你给<article>设置的width:100%，是相对于父容器的总宽度来计算的，不是容器减去<nav>之后的剩余空间。这意味着<article>的基础尺寸就等于父容器宽度，再加上<nav>的18rem，两个子元素的总宽度必然超过父容器的宽度。

• Flex容器的默认收缩机制
  Flex容器默认会尝试容纳所有子元素，当总尺寸超出容器宽度时，会根据子元素的flex-shrink属性（默认值为1）来按比例收缩元素。你的<nav>虽然设了固定宽度，但flex-shrink是默认的1，也就是允许被收缩，所以就被<article>挤得变窄了。

• 填充剩余空间的正确逻辑
  如果你想让<article>占满剩余空间，应该用Flex专属的flex:1属性。flex:1等价于flex-grow:1; flex-shrink:1; flex-basis:0%，其中flex-grow:1会让元素主动去占据容器的剩余可用空间，而不是先把自己撑到父容器宽度再挤其他元素。

简单来说，width:100%是传统的宽度计算方式，和Flex的空间分配逻辑不兼容；而flex属性才是为Flex布局量身定做的空间分配工具。

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