Flexbox 高度显示为 0px，包含 img 标签

Question

我试图让两个图像连续显示，所以我使用的是弹性框。我将框的高度设置为 500px，但它几乎*总是计算为 0px。它让我想起了浮动元素的问题，但我已经尝试过使用 img {display:block} 并将 img 标签嵌套在容器 div 中，但似乎都不起作用。

• = 我说“几乎”是因为在 Chrome 49.0.2623.112（但不是我的小提琴）中查看测试页面并调整视口宽度时，媒体查询从 min-width:737px 样式翻转到 max -width: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 是一个弹性框。

只需将.popup_container 更改为display: block，将height 从.milky 中删除，我相信它会按照您的意愿行事。

为什么？

.popup_container flexbox 中的项目（例如您的内容、图像和脚注）自动尝试共享所有垂直空间，即显示高度的 100%，因为 .popup_container 是后代.popup_background，其中有 height: 100%。 但是，有一个例外。出于某种原因（如果有人知道为什么我会很高兴包含它），文本内容优先于带有图像的弹性框。当文本用完它需要的所有空间时，flexbox 减少到几乎没有任何东西。您在 flexbox 上的 height 属性已过时，因为它本身就是一个 flexbox 项。

另请注意：将固定元素作为固定元素的子元素是一种不好的做法，而这正是您目前所拥有的。内部元素根本不需要固定。