Firefox中height: fit-content无效，求替代方案

针对Firefox里height: fit-content不生效的问题，给你几个可行的解决办法：

1. 直接移除height属性（最优方案） #

块级元素默认会自适应内容高度，你的.main--5设置了position: relative，属于常规块级布局，完全不需要额外设置height: fit-content，删掉这个属性就能让元素高度自动匹配内容。

修改后的代码示例：

.main--5 {
  position: relative;
  max-width: 100%;
  background-color: var(--firstColor);
  opacity: 100 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block; /* 注意：你原代码里同时写了display:block和display:none，这会导致元素默认隐藏，保留一个符合需求的即可 */
  padding: 1.6rem;
  overflow-y: hidden;
}

2. 添加Firefox兼容前缀 #

如果你的场景必须显式声明高度自适应，针对旧版Firefox可以添加私有前缀：

height: -moz-fit-content;
height: fit-content;

这样新版浏览器用标准属性，旧版Firefox用前缀版本兜底。

另外注意你原代码里的display: block和display: none是冲突的，最终生效的是后面的display: none，元素会被隐藏，这也可能导致你看不到height: fit-content的效果，记得根据实际需求保留一个display属性。

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