Css 如何在不使用flexbox的情况下水平渲染div？

我正在设计一个带有ReactJS和Typescript的网站，我希望每个页面都位于一张卡片上，当用户使用导航栏时，当前卡片会滑开，新卡片会滑入。我正在使用

react transition group

来完成此任务。我最终想为它添加方向，但我被困在了前面的障碍上

一切正常，当前路线存在，新路线从屏幕上下载，当前路线滑开，新路线滑入

我的问题是，新组件每次都在新行上渲染，而不是与当前组件内联。这会导致一个急促的跳下，然后上升。 我试图通过使我的父容器

display:flex

和我的每个孩子

flex:1

，但正如您可以想象的那样，这会导致两个组件的宽度在过渡中期出现一些非常奇怪的结果。我还试图通过将flex改为

flex:1100%

和其他一些变体来解决这个问题，但没有成功

我确实把我的App.tsx放在这里了，但是说实话，我觉得它没有那么重要。如果你觉得你需要它，尽管告诉我。基本结构是：

<div id='main>
    <Route exact path={path} key={title}>
        <CSSTransition
            classNames='mainCard'
            nodeRef={refQuery}
            unmountOnExit
        >
            <div
                className='mainCard'
                ref={refQuery}
            >
                <Component />
            </div>
        </CSSTransition>
        ...
    </Route>
</div>

然后，在我的custom.scss中，我一直在尝试解决以下问题：

#main {
    display: flex;
    justify-content: space-between;
    .mainCard {
        flex: 1
    }
}

我也尝试了css网格，但是我没有太多的实践，所以我无法解决它

注意：这个项目使用Bootstrap，所以如果您有一个class-y（看看我在那里做了什么？）方法来修复它-我也很擅长

---

请提前向您表示感谢

因此，该项目的想法发生了很大的变化，但这里的一般解决方案是我需要使用

transform:translate3d（）

#main {
    display: flex;
    justify-content: space-between;
    .mainCard {
        flex: 1
    }
}