clip-path内部文字无法溢出

想要做一个类似以下的效果：

当左侧比例很小比如5%，那么文本内容正常来说会溢出。

但是由于我的嵌套层级是这样的：

<div className="outer">
 <div className="inner">奈飞奈飞奈飞</div>
 <div>5%</div>
</div>

outer{
clip-path:polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

导致文本无法溢出，因为clip-path在裁剪outer这个容器的时候，顺便把文字内容也裁剪了 。

解决办法就是

.outer{
position:relative;
clip-path:xxxxx;
}
.inner{
  position:absolute;
  top:10px;
  left:10px;
}