部署后CSS Flex布局失效求助：Chrome异常、Safari正常

问题描述 #

我需要页面垂直分为两栏，本地环境显示正常，但部署后仅Safari能正常显示，Chrome中布局失效（见下方截图）。已经给container的display:flex加了!important，也确认没有外部CSS覆盖，求技术帮助。

当前代码 #

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

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>

解决方案 #

• 重置浏览器默认样式：Chrome默认的body margin会挤压容器空间，先统一重置：

  html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
  }
  * {
    box-sizing: inherit;
  }
  

• 修复宽度溢出问题：width:50%加上padding会让元素总宽度超过50%，触发Chrome换行，改用flex属性并配合盒模型：

  .left-panel, .right-panel {
    flex: 0 0 50%; /* 固定占比，不收缩不放大 */
    padding: 20px;
    box-sizing: border-box; /* padding包含在宽度内 */
  }
  

• 优化容器高度兼容性：替换100vh为基于父元素的100%，避免Chrome的viewport计算问题：

  .container {
    display: flex;
    height: 100%;
  }
  

• 验证样式优先级：如果以上无效，尝试使用更具体的选择器提升优先级，比如：

  body > .container {
    display: flex;
  }
  

内容的提问来源于stack exchange，提问作者Gavin Reid