Css Flex项目在Firefox中包装时超过容器高度

在当前的Firefox（50）中，当标题中的两个项目包裹在715px以下时，较低的项目延伸到标题高度以下。我已经使用了每个项目的flex速记语句和最小宽度，并尝试了@media查询最大宽度的屏幕，但无法停止。这一页是

CSS：

标题{
显示器：flex；
柔性流：行反向包裹；
证明内容：周围的空间；
高度：320px；
填充：20px0；
}
.秘书1{
flex:4200px；
最小宽度：200px；
右：6vw；
左：3vw；
利润率最高：2vw；
@仅介质屏幕和（最大宽度：1350px）{
弹性：610；
利润率最高：6vw；
}
}
.sec2{
自对准：居中；
柔性：7 0 250像素；
显示器：flex；
弯曲方向：行反向；
调整内容：灵活启动；
p{
宽度：40%；
文本对齐：右对齐；
右边距：30px；
边缘底部：25px；
调整项目：灵活启动；
}
}
.口音{
字体大小：20px；
颜色：#967832；
线高：24px；
背景：rgba（0,0,0,0.7）；
边界半径：50px；
边框：8px纯黑；
填充：12px；
}
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：柔性端；
对齐项目：拉伸；
}
部分{
显示：框；
显示器：flex；
填充：15px；
flex:10350px；
利润率最高：3vw；
左边距：6vw；
}

它到底是什么样子的

在月球上生活
现实的月球殖民地，即将上线

这个项目正在月球上建立一系列虚拟殖民地。它们将是非常详细的交互式演示，在技术上和科学上都完全合理。他们将检查所有的问题，考虑所有的含义。
当人类在太空定居的规模上进行冒险时，有多少人事先对其进行了真正的思考是非常重要的。这些殖民地就是为了这个目的。

金已经完成了拉兰德陨石坑极其详细的地图的绘制。这是一个巨大的文件，但可根据要求提供。

您的代码过于复杂。其中大部分可以安全移除。尝试一个排除过程来找出问题所在

下面是您的代码的修订版本（在Chrome&FF上测试）：

在月球上生活会是什么样子

---

我会记住这是一般做法，但在这种情况下没有帮助。我用一个“sec1”类的div来更新页面，并将该类从徽标上去掉。事实上，在发布我的答案之前，我将你的图片包装在一个div中，布局正常。这意味着，较低的元素没有溢出标题，布局看起来就像在Chrome中一样。这就是我发布这个答案的原因。那么，在你做这件事的方式和直播页面之间肯定还有其他的区别。live页面无法工作。您是否能够解决此问题？在这方面我无能为力。修复后，我在Chrome和FF中看到了相同的布局。另一个页面上也出现了类似的行为，Chrome上也出现了类似的行为。还有别的事情我一点也不明白。我试着按下标题，但Chrome和Firefox上的布局完全不同，而且通常会根据屏幕宽度的不同而变得丑陋，每次尝试修复都会带来重叠问题。我想也许我应该修改一下这个问题，但我现在很迷茫。

<header>
  <img id="logo" src="http://www.moonwards.com/img ... svg" alt="Moonwards" id="logo">
  <p id="note">What would it really be like<br> to live on the Moon?</p>
</header>