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

Question

在当前的 Firefox (50) 中，当 header 中的两个 item 环绕低于 715px 时，较低的 item 延伸到 header 的高度以下。我玩过每个项目的 flex 速记语句和最小宽度，并尝试使用 @media 查询具有该最大宽度的屏幕，但无法停止。页面是here。

CSS：

header {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-around;
  height: 320px;
  padding: 20px 0;
}
.sec1 {
  flex: 4 2 200px;
  min-width: 200px;
  padding-right: 6vw;
  padding-left: 3vw;
  margin-top: 2vw;
  @media only screen and (max-width: 1350px) {
    flex: 6 1 0;
    margin-top: 6vw;
  }
}
.sec2 {
  align-self: center;
  flex: 7 0 250px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  p {
    width: 40%;
    text-align: right;
    margin-right: 30px;
    margin-bottom: 25px;
    align-items: flex-start;
  }
}
.accent {
  font-size: 20px;
  color: #967832;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50px;
  border: 8px solid black;
  padding: 12px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
}
section {
  display: box;
  display: flex;
  padding: 15px;
  flex: 1 0 350px;
  margin-top: 3vw;
  margin-left: 6vw;
}

<header>
  <div class="sec1">
    <img src="http://www.moonwards.com/img/MWLogo-for-black-bckgnd.svg" alt="Moonwards" id="logo">
  </div>
  <div class="sec2">
    <p class="accent">What would it really be like
      <br>to live on the Moon?</p>
  </div>
</header>
<div class="container">
  <section>
    <div class="outerDiv">
      <div class="innerDiv intro">
        <h1>Realistic Lunar Colony, Coming Online</h1>
        <p>
          This project is building a series of virtual colonies on the Moon. They will be richly detailed and interactive presentations that are entirely plausible, technically and scientifically. They will examine all the questions, consider all the implications.
          When humanity undertakes ventures on the scale of space settlement, it matters a great deal how many people have given it real thought beforehand. These colonies serve that purpose.
        </p>
      </div>
    </div>
  </section>
  <aside>
		<div class="sideDiv"id="RSS-feed">
      <p id="item2" class="atom"><span class="datetime">Mon, 07 Nov 2016 19:50:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">Lalande map</a></span><span class="description">Kim has finished composing an extremely detailed map of the Lalande crater. It is a huge file, but available at request.</span>
      </p>
		</div>

问题似乎是 Firefox 在包装时没有考虑容器的高度。有什么方法可以阻止溢出？

Answer 1

您的代码过于复杂。其中大部分可以安全地移除。尝试排除过程来查明问题。

这是您的代码的修订版本（在 Chrome 和 FF 上测试）：

<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>

revised codepen