Html 如何在React中对齐相邻的两个组件？

我一直在为React中的聊天室应用程序构建UI。一切都很顺利，直到突然，它刷新，用户界面“坏了”。基本上，我有两个组件，一个边栏组件和一个聊天组件。我使用flex来定位它们。这是我的密码：

Sidebar.js

<div className="sidebar">
                <Card className="sidebar_card left">
                    <Icon icon="mountain" iconSize={40} />
                    <div>
                        <Button icon="search" minimal fill large />
                    </div>
                    <div>
                        <Button icon="plus" minimal fill large />
                    </div>
                </Card>
                <Card className="sidebar_card right">
                    <div>
                        <h2 className="bp3-heading">Smart Labs</h2>
                        <Popover content={popupMenu}>
                            <Button icon="chevron-down" minimal />
                        </Popover>
                    </div>
                    <CreateRoom />
                    <Menu>
                        {rooms.map(room => (
                            <SelectRoom text={room.name} id={room.id} />
                        ))}
                    </Menu>

                    <div></div>
                    <Button text="People" icon="new-person" minimal outlined />
                    <Menu>
                        <MenuItem text="Tony Quach" />
                    </Menu>
                </Card>
        </div>

Chat.css：

.chat {
    display: flex;
    flex: 0.7;
    height: 100vh;
}

.chat_card {
    width: 100%;
    border-radius: 0;
    margin: 0;
}

.chat_header {
    margin: 0 20px 0;
}

.chat_body {
    margin: 20px 20px 0;
}

在App.js中，我只做：

<div class="app">
   <Sidebar />
   <Chat />
</div>

我使用Blueprint.js

我使用border:1px solid red来调试它，似乎侧边栏组件虽然只有一个flex:0.3，但不知何故占据了整个页面的宽度，并向下推聊天组件（因此它们彼此堆叠，而不是相邻对齐）

---

有什么建议吗？谢谢。

我添加了

位置：绝对；左：0

到侧边栏组件和

位置：绝对；右：0

至聊天组件

.chat {
    display: flex;
    flex: 0.7;
    height: 100vh;
}

.chat_card {
    width: 100%;
    border-radius: 0;
    margin: 0;
}

.chat_header {
    margin: 0 20px 0;
}

.chat_body {
    margin: 20px 20px 0;
}

<div class="app">
   <Sidebar />
   <Chat />
</div>

app {
    display: flex;
}