<style>
    .main-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .top-bar {
        height: 3.4rem;
        width: 100%;
        padding: 6px;
        background-color: papayawhip;
    }

    .messages-container {
        height: 100%;
        width: 100%;
        background-color: mediumseagreen;
    }

    .message-input-container {
        height: 3.4rem;
        width: 100%;
        padding: 6px;
        background-color: antiquewhite;
    }
</style>

<div class="main-container">
    <div class="top-bar">

    </div>
    <div class="messages-container">

    </div>
    <div class="message-input-container">

    </div>
</div>
