Question

在当前的Firefox（50）中，当标题中的两个项目包裹在715px以下时，较低的项目会延伸到标题的高度以下。我已经使用了每个项目和最小宽度的弹性简写语句，并尝试使用@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＆amp; 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

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

1 个答案: