當在Firefox中包裝時，Flex項目超過容器高度

Question

在當前Firefox（50）中，當標題中的兩個項目包裝在715px以下時，較低項目延伸到標題高度以下。我已經玩過每個項目的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> 
 
\t \t <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> 
 
\t \t </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