Firefoxでラップすると、Flexアイテムがコンテナの高さを超えます

Question

現在のFirefox（50）では、ヘッダーの2つの項目が715pxを下回ると、下位項目がヘッダーの高さを下回ります。私は各項目のフレックスの簡略表記とmin-widthsで試してみましたが、そのmax-widthを持つ画面の@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

あなたのコードは非常に複雑です。その多くは安全に取り外すことができます。問題の原因を突き止めるプロセスを試してください。

ここにあなたのコードの改訂版（クローム& 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