锚点标签跳转后display:flex样式仅首次生效问题求助

我正在开发一个全栈项目，遇到动态生成的锚点标签跳转后CSS样式加载不一致的问题。动态生成锚点的JavaScript代码如下：

recordData.forEach(record => {
      let a = help.createElement('a');
      let text = record.jobTitle + " (" + record.deptName + ", " + record.subDeptName + ")-" + record.email;
      a.textContent = text;
      a.href = `/frontend/contractorForm/contractorForm.html`;
      a.addEventListener('click', function(event) {
        sessionStorage.clear();
        sessionStorage.setItem('record', JSON.stringify(record));
      }, false);
      parent.appendChild(a);
}

我的设计思路是通过sessionStorage存储数据，复用contractorForm.html表单模板并填充对应值。但实际测试发现，点击锚点跳转后，仅首次打开contractorForm.html时，页面中设置的display:flex; justify-content:center样式能正常生效，后续跳转该样式就失效了。

我已完成以下排查验证：

• Devtools显示CSS文件已成功加载
• 禁用并清除了浏览器缓存
• 在href后添加?version={随机数}强制刷新资源
• 在Devtools中手动修改该样式可正常生效
• 修改页面背景色等其他样式功能正常
• CSS代码在Bootstrap之后加载，样式优先级无问题
• 页面路径与锚点链接均正确

目前仅display:flex相关样式无法稳定生效，恳请各位提供解决思路，谢谢！

附相关截图说明：

• 锚点标签的HTML结构视图
• 首次点击锚点后的页面显示（样式正常）
• 后续点击锚点后的页面显示（样式失效）

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