Html CSS过渡宽度不适用于flex

布局：

sideBarExtra使用react Transisition group CSStranisitionGroup组件有条件地进行渲染

sideBarExtra在渲染时将从左向右平滑滑入，在移除时从右向左滑出

当添加sideBarExtra时，content div不会平滑过渡，它会跳转到其点

预期行为：满足于平滑滑动到新宽度

在console dev tools中，我可以看到内容宽度正在更改，但没有发生转换动画。

.sideBarContainer{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
.侧边栏{
背景：红色；
高度：100vh；
最小宽度：64px；
z指数：99；
}
.内容{
宽度：10%；
高度：100vh；
背景：黄色；
过渡：宽度。3s线性；
}
.内容：悬停{
宽度：80%；
}

盘旋我

我们是否忽略了React.js采用className而不是class来采用样式？我只是为了可读性在这里重写了代码，我不想粘贴所有组件，因为它们是多个文件。代码正在使用className，但我会编辑它。您可以再次查看我的ans plz

<div style={{ flex:1 }}>
    <div className="sideBarContainer">
         <div className="sideBar">
         <div className="sideBarExtra"> <--- conditional
    </div>
    <div className="content"></div>
</div>

.sideBarContainer {
    display: flex;
    flex-direction: row;
}
.sideBar {
    height: 100vh;
    min-width: 64px;
    z-index: 99;
}
.content {
    flex: 1;
    transition: width .3s linear;
}