如何在React中将2个组件彼此对齐？

如何解决如何在React中将2个组件彼此对齐？

我一直在React中为聊天室应用程序构建UI。一切都进行得很好，直到突然之间，它刷新并且UI“中断”。基本上，我有2个组件，一个Sidebar组件和一个Chat组件。我使用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.js：

<div className="chat">
            <Card className="chat_card">
            <div className="chat_header">
                <h2 className="bp3-heading">{roomDetails?.name}</h2>
                <Divider />
            </div>
            <div className="chat_body">
                {roomMessages.map(({ message,timestamp,user,userImage }) => (
                    <Message
                        message={message}
                        timestamp={timestamp}
                        user={user}
                        userImage={userImage}
                    />
                ))}
           </div>
           <ChatInput roomName={roomDetails?.name} roomId={roomId} workspaceId={workspaceId} />
           </Card>
        </div>

Sidebar.css：

.sidebar {
    display: flex;
    flex: 0.2;
    height: 100vh;
}

.sidebar_card {
    border-radius: 0;
    margin: 0;
}

.sidebar_card > div {
    display: flex;
    justify-content: space-between;
}

.left > div {
    margin: 10px 0 0;
}

.right > div {
    margin: 0 0 20px;
}

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>

App.css：

app {
    display: flex;
}

我使用Blueprint.js

我使用border：1px的红色尝试对其进行调试，似乎Sidebar组件虽然只有flex：0.3以某种方式占据了页面的整个宽度，并将Chat组件向下推（因此它们堆叠在每个组件上）而不是彼此对齐）。

有什么建议吗？谢谢。

解决方法

我通过在边栏组件中添加position: absolute; left: 0和在Chat组件中添加position: absolute; right: 0来解决此问题。