flexbox布局--右侧盒子文本过长用省略号, 导致左侧盒子宽度不生效

这篇笔记主要记录flex-shrink的使用.

flexbox布局--右侧盒子文本过长用省略号, 导致左侧盒子宽度不生效。如图, 给的圆圈宽度是67px,但实际上渲染出是54px

先看下代码，样式用的是unocss

   <div class="text-[#00E3FF] flex text-[80px] items-center h-[80px]">
           <!-- 左侧盒子 -->
            <div
              class="flex justify-center items-center bg-[transparent] w-[67px] h-[67px] border-solid border-[4px] rounded-[37px]"
              :class="getBorderBg(index)"
            >
              <div class="w-[48px] h-[48px] rounded-[24px]" :class="getCircleBg(index)"></div>
            </div>
            <!-- 右侧盒子 -->
            <div
              :title="item.name"
              class="text-white text-ellipsis overflow-hidden whitespace-nowrap pl-[56px] flex-grow"
            >
              {{ item.name }}
            </div>
          </div>

原因：右侧文本太多，占据了左边盒子的宽度，导致左边盒子宽度没生效。给左边盒子增加flex-shrink: 0,设置不压缩，就可以了。

   <div
              class="flex shrink-0 justify-center items-center bg-[transparent] w-[67px] h-[67px] border-solid border-[4px] rounded-[37px]"
              :class="getBorderBg(index)"
            >
              <div class="w-[48px] h-[48px] rounded-[24px]" :class="getCircleBg(index)"></div>
            </div>

MDN文档flex-shrink链接

动图证明flex-shrink