Flex-Objekte überschreiten die Containerhöhe beim Einschließen in Firefox

Question

Im aktuellen Firefox (50), wenn die beiden Elemente in der Kopfzeile unter 715px wickeln, erstreckt sich das untere Element unter der Höhe des Headers. Ich habe mit den Flex-Kurzschreibanweisungen jedes Elements und minimalen Breiten gespielt und eine @ media-Abfrage für einen Bildschirm mit dieser maximalen Breite versucht und kann nicht dazu gebracht werden, dass sie aufhört. Die Seite ist here.

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

Das Problem scheint zu sein, dass Firefox nicht die Höhe des Behälters unter Berücksichtigung, wenn Verpackung. Wie kann man den Überlauf stoppen?

Answer 1

Ihr Code ist übermäßig komplex. Vieles davon kann sicher entfernt werden. Probieren Sie einen Eliminierungsprozess aus, um das Problem zu lokalisieren.

Hier ist eine überarbeitete Version des Codes (getestet auf 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