Flexbox高度顯示爲0px，包含img標籤

Question

我試圖讓兩個圖像在一行中顯示，所以我使用的是flexbox。我將盒子的高度設置爲500px，但它幾乎總是計算爲0px。它讓我想起了內部浮動元素的問題，但是我已經通過img {display：block}和將img標籤嵌套在容器div中嘗試了這一點，但都看起來不起作用。

• =我說「幾乎」是因爲在Chrome 49.0.2623.112測試頁上觀看時（但不是我的小提琴），並調整視口的寬度，查詢從最小寬度翻轉紙張後，右：737px風格到最大寬度：736px的樣式，flexbox突然有了高度。

這裏有一個小提琴：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

您的問題是.popup_container是Flexbox的。

簡單地改變.popup_container到display: block，採取height斷.milky，我相信它會表現爲你想。

爲什麼？

的.popup_container Flexbox的內的物品（如內容，圖像和腳註）自動嘗試共享所有的垂直空間，這是顯示高度的100％，由於.popup_container是.popup_background後代，其中有height: 100%。但是，有一個例外。出於某種原因（如果有人知道我爲什麼很樂意將其包含在內），文本內容優先於帶圖像的Flexbox。雖然文本耗盡了所有需要的空間，但Flexbox幾乎可以淪爲任何東西。 Flexbox上的您的height屬性已過時，因爲它本身就是一個Flexbox項目。

另請注意：固定元素的孩子是固定元素的壞習慣，這是您目前擁有的元素。內部元素根本不需要固定。