GitHub部署后Flex布局异常：子元素宽度显示错误求助

本地开发时布局完全正常，但上传至GitHub Pages部署后出现错乱：设置了宽度100%且display:flex的父容器.video-infor-container，包含两个子容器.ad_container（flex:6）和.infor_container（flex:4），但部署后.ad_container直接消失，.infor_container占据了父容器100%的宽度。

简化后的代码结构 #

CSS代码

.video-infor-container {
  width: 100%;
  display: flex;
}

.ad_container {
  padding-right: 30px;
  position: relative;
  flex: 6;
}

.ad_img {
  width: 100%;
  border-radius: 0 20% 0 20%;
}

.infor_container {
  height: 450px;
  flex: 4;
}

.des_container {
  height: 294px;
  padding-bottom: 30px;
  padding-top: 30px;
}

HTML代码

<div class="video-infor-container">
  <div class="ad_container vid_infor_items">
    <img src="./asset/img/video/ver1.2/big.jpg" alt="" class="ad_img">
    <button class="play_button"><img src="./asset/img/video/p.webp" alt="" style="width: 80px;height:80px;" ></button>
  </div>

  <div class="infor_container vid_infor_items">
    <div class="des_container">
      <div class="des_title_conatiner">
        <p class="des_title">Version 1.2 Trailer</p>
        <img src="./asset/img/video/str.png" alt="" class="signature">;
      </div>
      <p>"That was a night in 1971, a night with pouring rain."
        <br>
        <br>"Heavily and hastily, sheets of rain formed a barrier, isolating the woods from the outside world."
        <br>
        <br>"Day after day, the smell of fungi and moist soil never disappeared. It lingered for one week, two weeks, three weeks ..."</p>
    </div>

显示差异 #

• 本地环境（正常显示）：左右两栏布局，左侧为带图片的广告容器，右侧为文字信息容器，比例符合6:4
• GitHub部署（异常）：仅显示右侧文字信息容器，左侧广告容器完全不见
• 子元素占满100%宽度：右侧信息容器拉伸至占据父容器全部宽度

已尝试的解决步骤 #

• 调整父元素和子元素的width属性
• 给子元素添加float:left属性，无效果
• 将.ad_container设置为固定宽度（如1200px），仍无法显示

已通过浏览器开发者工具检查元素，但未找到问题根源，求分析为何本地正常的布局在GitHub部署后出现异常。

内容的提问来源于stack exchange，提问作者Nguyễn Việt Hải