Flexbox-Höhe wird als 0px angezeigt, enthält Img-Tags

Question

Ich versuche, zwei Bilder in einer Reihe anzuzeigen, also verwende ich eine Flexbox. Ich habe die Höhe der Box auf 500px eingestellt, aber es berechnet sich fast immer zu 0px. Es erinnert mich an das Problem mit schwebenden Elementen, aber ich habe es mit img {display: block} und durch Verschachteln der img-Tags in Container-divs probiert, aber beide scheinen nicht zu funktionieren.

• = Ich sage „fast“, weil, wenn in Chrome 49.0.2623.112 auf einer Testseite sehen (aber nicht meine Geige) und Einstellen der Breite des Ansichtsfensters, direkt nach dem Medien-Abfrage aus dem min-width Flips: 737px Stil zur max-width: 736px style hat die flexbox plötzlich höhe.

Hier ist eine Geige: https://jsfiddle.net/territorylit/6v4euuwL/

CSS

.popup_background { 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    background-color:rgba(255,255,255,0.8); 
    z-index:100000000; 
} 

@media screen and (min-width:737px) { 

} 

@media screen and (max-width:736px) { 

} 

.popup_background img.button { 
    position:fixed; 
    right:0; 
    top:0; 
    width:50px; 
    height:50px; 
    border: none; 
    z-index:100000001; 
    transition:all 0.1s linear; 
} 

.popup_background img.button:hover { 
    border-right-style:solid; 
    border-right-color:rgba(175,0,175,1); 
    border-top-style:solid; 
    border-top-color:rgba(175,0,175,1); 
} 

    @media screen and (min-width:737px) { 
     .popup_background img.button { 
      margin-right: calc(5% + 3px); 
      margin-top: calc(5% + 3px); 
      padding-top:5px; 
     } 
     .popup_background img.button:hover { 
      margin-right: calc(5% + 3px); 
      margin-top: calc(5% + 3px); 
      border-right-width:3px; 
      border-top-width:3px; 
      padding-right:3px; 
      padding-top:8px; 
     } 
    } 

    @media screen and (max-width:736px) { 
     .popup_background img.button { 
      padding-top:5px; 
     } 
     .popup_background img.button:hover { 

     } 
    } 

.popup_container { 
    position:fixed; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-box; 
     display: -webkit-flex; 
    display: flex; 
    justify-content:center; 
    align-items:center; 
    align-content:center; 
    flex-direction:column; 
    overflow-y:scroll; 
    background-color:rgba(255,255,255,0.9); 
} 

    @media screen and (min-width:737px) { 
     .popup_container { 

      margin-left:5%; 
      margin-right:5%; 
      margin-top:5%; 
      margin-bottom:5%; 
      border-width:3px; 
      border-style:solid; 
      border-color:rgba(0,0,0,0.6); /* grey */ 
      box-shadow: 0px 0px 3px 2px rgba(10,123,167,0.2); /* cerulean */ 
     } 

    } 

    @media screen and (max-width:736px) { 
     .popup_container { 
      margin-left:3%; 
      margin-right:3%; 
      margin-top:3%; 
      margin-bottom:3%; 
      border-width:2px; 
      box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.9); /* white transparent */ 
     } 
    } 

.popup_container.top_heavy { 
    justify-content:flex-start; 
} 


p.chelsea { 
    font-family:garamond,serif; 
    font-size:1.3em; 
} 

    @media screen and (min-width:737px) { 
     p.chelsea { 
      max-width:70%; 
      line-height:140%; 
     } 
    } 

    @media screen and (max-width:736px) { 
     p.chelsea { 
      height:auto; 
      max-width:90%; 
      line-height:130%; 
     } 
    } 

p.chelsea.footnote { 
    font-family:garamond,serif; 
    font-size:1rem; 
    text-align:right; 
    margin-bottom:1.5rem; 
} 

    @media screen and (min-width:737px) { 
     p.chelsea.footnote { 
      width:50%; 
     } 
    } 

    @media screen and (max-width:736px) { 
     p.chelsea.footnote { 
      width:90%; 
     } 
    } 

p.chelsea.translation { 
    font-size:1.2rem; 
    line-height:150%; 
} 

p.chelsea img { 
    width:100%; 

} 

.milky { 
    height:500px; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-box; 
     display: -webkit-flex; 
    display: flex; 
    flex-direction:row; 
    justify-content:center; 
    align-items:flex-start; 
    align-content:center; 
    flex-wrap:nowrap; 
    overflow:hidden; 
} 

    @media screen and (min-width:737px) { 
     .milky { 
      width:70%; 
     } 
    } 

    @media screen and (max-width:736px) { 
     .milky { 
      width:90%; 
     } 
    } 

#rotation-01 { 
    flex:0.6; 
} 

#rotation-02 { 
    flex:1.5686; 
} 

HTML

<div id="section_04" class="section"> 

    <div class="popup_background"> 

     <img class="button" src="http://res.cloudinary.com/territory/image/upload/v1461522074/general/hr_grey_50x50.png" onclick="talkPopUpOff(this.id)" id="section_04_off" /> 

     <div class="popup_container top_heavy"> 

      <p class="chelsea">&nbsp;</p> 

      <div class="milky"> 
       <img id="rotation-01" src="https://static1.squarespace.com/static/557a4c2ee4b0fe5a537746b5/t/58b76175bf629a06758f0e2c/1488413284637/milky-way-rotation-1.jpg" /> 
       <img id="rotation-02" src="https://static1.squarespace.com/static/557a4c2ee4b0fe5a537746b5/t/58b7618b8419c2a168e77ac6/1488413330003/milky-way-rotation-2.jpg" /> 
      </div> 

      <p class="chelsea">“...in the absence of a bright star near the celestial south pole, Quechua peoples and their ancestors organized the sky by reference to the Milky Way, called Mayu or the “celestial river,” and its apparent cruciform rotations. In a twenty-four-hour period, the Milky Way forms two intersecting intercardinal axes that divide the heavens into quarters. Since the plane of the Milky Way is inclined in relation to the earth’s axis, the stars of one quarter will rise as those of the opposite quarter set as the earth rotates. Astronomical phenomena can be tracked with respect to these quarters, which create a systematic means for the spatial and temporal reckoning of the world and its natural and social rhythms. This principle is central to pre-Columbian spatial reckoning.”</p> 

      <p class="chelsea footnote">Gartner, William Gustav. "6· Mapmaking in the Central Andes." <em>Americas</em> 169 (1970): 647-54.</p> 

      <p class="chelsea">&nbsp;</p> 

     </div> 

    </div> 

</div> 

Answer 1

Ihr Problem ist, dass .popup_container ein Flexbox ist.

Einfach .popup_container-display: block ändern, nehmen Sie die height weg von .milky, und ich glaube, es verhält sich, wie Sie möchten.

Warum?

Die Elemente innerhalb des .popup_container Flexbox (wie Ihre Inhalte, Bilder und Fußnote) automatisch versuchen, alles den vertikalen Raum zu teilen, die zu 100% der Bildhöhe ist, da .popup_container ist ein Nachkomme von .popup_background, die hat height: 100%. Es gibt jedoch eine Ausnahme. Aus irgendeinem Grund (wenn jemand weiß, warum ich froh sein werde, es aufzunehmen), hat der Textinhalt Vorrang vor der Flexbox mit den Bildern. Während der Text den benötigten Platz verbraucht, reduziert sich die Flexbox auf fast alles. Ihre height -Eigenschaft auf der Flexbox ist veraltet, da sie selbst ein Flexbox-Element ist.

Beachten Sie auch: Es ist eine schlechte Übung, ein festes Element das Kind eines festen Elements zu haben, was Sie gerade haben. Das innere Element muss überhaupt nicht fixiert werden.