为什么 CSS flex 部署后不起作用？

Question

我希望我的页面垂直分成两部分。这可以在本地运行，但在部署时不能在 Chrome 上运行（参见屏幕截图），尽管它可以在 Safari 上运行。

任何帮助表示赞赏

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 */
}

我尝试将 !important 添加到容器 Flex 中。没有可能覆盖样式表的外部 CSS 样式。

Answer 1

我在运行 Monterey 12.6.1 的 Mac 上，此代码适用于我的所有浏览器。

勇敢：v 1.70.126 Chrome：v 125.0.6422.113 Safari：15.6.1 火狐浏览器：131.0b4

也许列出操作系统的具体版本您使用的浏览器可能有助于确定导致问题的原因？

为什么 CSS flex 部署后不起作用？

问题描述投票：0回答：1

1个回答

最新问题

为什么 CSS flex 部署后不起作用？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1