Flexbox的孩子的孩子四溢

Question

我的Flex框的孩子有孩子自己，对这些孩子中的一个（<img>我用object-fit:cover，以确保所有的图像块将是相同的高度/宽度）。

问题是第二个孩子（<h4>标签）没有被包含在Flex Box中并且看起来溢出。

到目前为止，我的努力导致<h4>标签装配，但object-fit: cover停止工作。

这可能吗？

#content { 
 
    margin-left: 18%; 
 
    margin-right: 18%; 
 
    /*border: 1px solid black;*/ 
 
} 
 

 
h1.page-title { 
 
    margin-top: 0; 
 
    padding: 39px 0px 39px 150px; 
 
} 
 

 
.image-pane { 
 
    display: flex; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-tile { 
 
    margin: 1%; 
 
    width: 48%; 
 
} 
 
span.image-tile>img{ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
    box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2); 
 
} 
 
.image-text { 
 
    font-family: aftaSansRegular; 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <h1 class="page-title"> 
 
    Galleries 
 
    </h1> 
 

 
    <div class="image-pane"> 
 
    <span class="image-tile"> 
 
     <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/> 
 
     <h4 class="image-text"> 
 
     Sports 
 
     </h4> 
 
    </span> 
 

 
    <span class="image-tile"> 
 
     <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/> 
 
     <h4 class="image-text"> 
 
     Models 
 
     </h4> 
 
    </span> 
 
    </div> 
 
</div>

在答复你可以请提供它为什么会发生这样的解释，所以我能理解它而并非只是纠正：'P

Answer 1

当你告诉一个元素是height: 100%，它占据容器的整个高度。因此，兄弟姐妹没有剩余空间。这就是为什么h4被渲染到容器外的原因。

一个简单的修复方法是使柔性容器（.image-tile）的孩子也是柔性容器。

然后孩子们（图像和标题）成为弹性项目。与flex-direction: column他们垂直堆叠。

由于Flex项目上的初始设置为flex-shrink: 1和flex-wrap: nowrap，因此可以使用height: 100%的图像缩小，以便所有项目都可以放在容器内。

然后，您需要覆盖弹性最小高度默认值（min-height: auto），以便图像和标题都适合容器内。更多细节在这里：

• Why doesn't flex item shrink past content size?

此外，作为一个侧面说明，如果你打算使用比例的利润（或填充）柔性容器内，这样考虑：

• Why doesn't percentage padding/margin work on flex items in Firefox?

#content { 
 
    margin-left: 18%; 
 
    margin-right: 18%; 
 
} 
 

 
h1.page-title { 
 
    margin-top: 0; 
 
    padding: 39px 0px 39px 150px; 
 
} 
 

 
.image-pane { 
 
    display: flex; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-tile { 
 
    display: flex;   /* new */ 
 
    flex-direction: column; /* new */ 
 
    margin: 1%; 
 
    width: 48%; 
 
} 
 

 
span.image-tile > img { 
 
    min-height: 0;   /* new */ 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
    box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-text { 
 
    font-family: aftaSansRegular; 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <h1 class="page-title"> 
 
    Galleries 
 
    </h1> 
 

 
    <div class="image-pane"> 
 
    <span class="image-tile"> 
 
     <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/> 
 
     <h4 class="image-text"> 
 
     Sports 
 
     </h4> 
 
    </span> 
 

 
    <span class="image-tile"> 
 
     <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/> 
 
     <h4 class="image-text"> 
 
     Models 
 
     </h4> 
 
    </span> 
 
    </div> 
 
</div>

Answer 2

图像高度100％创造问题，因为由于父Flex属性作为flex图像本身占据的100％高度使孩子的身高100％。这就是为什么标题远离父母div的原因。

所以，如果你想使它完美，像300像素或任何根据您的设计的图像添加像素高度。

#content { 
 
    margin-left: 18%; 
 
    margin-right: 18%; 
 
    /*border: 1px solid black;*/ 
 
} 
 

 
h1.page-title { 
 
    margin-top: 0; 
 
    padding: 39px 0px 39px 150px; 
 
} 
 

 
.image-pane { 
 
    display: flex; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.image-tile { 
 
    margin: 1%; 
 
    width: 48%; 
 
} 
 
span.image-tile>img{ 
 
    width: 100%; 
 
    height: 200px; 
 
    object-fit: cover; 
 
    box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2); 
 
} 
 
.image-text { 
 
    font-family: aftaSansRegular; 
 
    text-align: center; 
 
}

<div id="content"> 
 
    <h1 class="page-title"> 
 
    Galleries 
 
    </h1> 
 

 
    <div class="image-pane"> 
 
    <span class="image-tile"> 
 
     <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/> 
 
     <h4 class="image-text"> 
 
     Sports 
 
     </h4> 
 
    </span> 
 

 
    <span class="image-tile"> 
 
     <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/> 
 
     <h4 class="image-text"> 
 
     Models 
 
     </h4> 
 
    </span> 
 
    </div> 
 
</div>