Div在Google Chrome中不显示（Firefox正常）的Flex布局问题

嘿，我来帮你排查下这个Chrome里广告Div不显示的问题～

首先，咱们先从几个最可能的原因入手，一步步来：

1. 先排查自定义函数calculateRem的问题 #

你用的calculateRem是自定义SCSS函数，Chrome和Firefox对SCSS编译后的CSS解析可能有差异，如果这个函数定义有问题或者编译后输出了无效值，Chrome可能直接忽略相关样式，导致元素位置不对甚至被挤出视口。

先试试把函数调用替换成固定的rem值测试，比如把margin: calculateRem(30pt) auto改成margin: 2.5rem auto（30pt换算成px是40px，除以基准16px就是2.5rem），看看Chrome里能不能显示——如果能，那就是calculateRem函数的定义有问题，比如你可能没正确声明这个函数，或者函数内部的计算逻辑出错了。

正确的calculateRem函数示例应该是这样的：

@function calculateRem($size) {
  $baseFontSize: 16px; // 页面基准字体大小，根据你的实际情况调整
  @return ($size / $baseFontSize) * 1rem;
}

2. 检查Flex容器和子元素的尺寸设置 #

Firefox和Chrome对Flex布局的默认规则有细微差异，比如如果Flex容器的子元素没有设置合适的尺寸，Chrome可能不会渲染出元素：

• 给#featured_ad_panel加个min-height（比如min-height: 100px），避免容器因为子元素无内容而高度为0；
• 给每个广告子Div加上flex: 1属性，让它们自动分配容器宽度，确保子元素有可渲染的尺寸；
• 暂时去掉main里的&>*{width:100%;}规则，这个全局设置可能会干扰Flex子元素的宽度计算。

3. 用Chrome开发者工具快速定位问题 #

按F12打开Chrome的开发者工具，做这两步：

• 切换到Elements面板，找到#featured_ad_panel这个元素，看看它是否存在、有没有被设置display: none或者visibility: hidden；
• 切换到Styles面板，查看这个元素的margin、width、display等属性是否生效，有没有被其他样式覆盖（被划掉的样式就是被覆盖的）。

修正后的示例SCSS代码 #

// 先确保自定义函数正确
@function calculateRem($size) {
  $baseFontSize: 16px;
  @return ($size / $baseFontSize) * 1rem;
}

main {
  width: 80%;
  margin: calculateRem(30pt) auto;

  #featured_ad_panel {
    display: flex;
    flex-direction: row;
    margin-top: calculateRem(30pt);
    min-height: 120px; // 给容器一个最小高度，避免无内容时消失
    gap: 10px; // 子元素之间的间距，比margin更方便

    .ad-item {
      flex: 1; // 让每个广告项平分容器宽度
      background: #f5f5f5; // 加个背景色方便测试
      border-radius: 4px;
    }
  }
}

按照上面的步骤排查，应该能快速找到问题所在～

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