Why is CSS flex not working when deployed?

I want my page to be divided in two vertically. This works locally, but not on Chrome when deployed (see screenshots), although it does work on Safari.

Any help appreciated

html

<body>
    <div class="container">
        <!-- Left Panel: Project Description -->
        <div class="left-panel">
            <h1>Project Description</h1>
            <p>
                Welcome to ...
            </p>
            <p>
                The bot’s core functionality...
            </p>
        </div>

        <!-- Right Panel: AlienBot -->
        <div class="right-panel">
            <h1>Chat with AlienBot</h1>
            <div class="chat-container" id="chat">
                <!-- Messages will be appended here -->
            </div>
            <div id="message-input">
                <input type="text" id="user_input" placeholder="Say something..." />
                <button onclick="sendMessage()">Send</button>
            </div>
        </div>
    </div>
</body>

css

.container {
    display: flex !important;
    height: 100vh; /* Full viewport height */
}

.left-panel, .right-panel {
    width: 50% !important;
    padding: 20px;
}

.left-panel {
    background-color: #f0f0f0; /* Light background for the description */
    box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.1); /* Divider shadow */
}

I’ve tried adding !important to the container flex. There are no external css styles that might override the stylesheet.

You need to sign in to view this answers

Related Post