flex布局下同行盒子展开折叠时的异常

Question

我的布局结构大致如下：

<div class="main-container flex">
  <!-- 侧边栏：tree-container -->
  <div class="tree-container ..."></div>
  <!-- 主内容：list-container（flex-1，占剩余空间） -->
  <div class="list-container flex-1"></div>
</div>

在tree-container中，有一个可以折叠的卡片组件，我希望当卡片处于折叠状态时，tree-container的宽度也跟着一起缩减，所以我给tree-container添加了样式：

<div class="tree-container" :class="[{ 'w-1/5': !isTreeCollapsed,'w-10':isTreeCollapsed }]">
          ...
</div>

但此时出现了问题，当我折叠卡片，然后再展开卡片时，我发现卡片没有恢复为w-1/5的状态，而是被挤压了（宽度缩小至未添加宽度样式时的宽），并且list-container中的内容也出现了水平方向的溢出异常。
于是我修改了代码：

<div class="tree-container" :class="isTreeCollapsed ? 'w-10' : 'w-72'">
  ...
</div>

这种情况下，上述异常消失，盒子可以正常展开和折叠。
这是为什么？

Answer 1

因为w-1/5是20%基于父元素，w-10是2.5rem基于根元素