自舉元素在額外的小尺寸上重疊

Question

我有recent-posts div顯示兩個帖子的圖像和文本。 recent-posts我有另一個div contact-us包含圖像和一些文本。我的問題出現在超小尺寸的地方，recent-posts帖子根據contact-us部分。我該如何解決這個問題？以下是我的代碼和JsFiddle。

HTML：

<div id="recent-posts" class="center-block row"> 
      <div class="posts col-md-3 col-sm-5 col-xs-9"> 
        <div class="posts-div"> 
         <div class="img-hover"> 
          <img src="images/post1.jpg" class="img-responsive"> 
          <div class="overlay col-md-12 col-xs-12"> 
           <div> 
            <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart"></span></span> 
            <span class="fa fa-2x fa-square post-icon" ><span>16</span></span> 
           </div> 
           <div> 
            <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye"></span></span> 
            <span class="fa fa-2x fa-square post-icon" ><span>16</span></span> 
           </div> 
          </div> 
         </div> 
        <p class="text-center">dsfdsfsdfldshfdskfhdsf</div> 
      </div> 
      <div class="posts col-md-3 col-sm-5 col-xs-9"> 
        <div class="posts-div"> 
         <div class="img-hover"> 
          <img src="images/post2.jpg" class="img-responsive"> 
          <div class="overlay col-md-12 col-xs-12"> 
           <div> 
            <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart "></span></span> 
            <span class="fa fa-2x fa-square post-icon" ><span>16</span></span> 
           </div> 
           <div> 
            <span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye "></span></span> 
            <span class="fa fa-2x fa-square post-icon" ><span>16</span></span> 
           </div> 
          </div> 
         </div> 
        <p class="text-center">dsjkfhjdssafjsdkjhfdsf</p> 
       </div> 
      </div> 
     </div> 
<div id="contact-us" class="row"> 
      <div class="col-md-12 col-xs-12"> 
       <img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive"> 
       <div id="contact-us-text"> 
        <p>sdkf,sd,kfnds,nf,d.....</p> 
        <p>kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d</p> 
        <button class="btn btn-success pull-left">124234234</button> 
       </div> 
      </div> 
     </div> 

的CSS：

#recent-posts{ 
    height: 350px; 
    display: flex; 
    justify-content: center; 
    position: relative; 
    flex-wrap: wrap; 
    margin-bottom: 100px; 
} 
.posts{ 
    display: flex; 
    flex-direction: column; 
    height: 350px; 
    margin-top: 20px; 
    position: relative; 
    border-radius: 5px; 
    box-shadow: 1px 1px 5px #888888; 
    padding: 0; 
    margin-left: 20px; 
    margin-right: 20px; 
} 
.posts img{ 
    border-radius: 5px 5px 0 0; 
    cursor: pointer; 
} 
.posts .btn-success{ 
    position: absolute; 
    background-color: #01a89e; 
    width: 50%; 
    color: #101010; 
    cursor: auto; 
    margin-top: -17px; 
    margin-right: 25%; 
} 
.posts .btn-success:active{ 
    background-color: #01a89e; 
    color: #101010; 
    box-shadow: none; 
} 
.posts p{ 
    margin-top: 30px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.overlay { 
    position: absolute; 
    top: 0; 
    bottom: 100%; 
    left: 0; 
    right: 0; 
    background-color: rgba(46, 183, 175, .7); 
    overflow: hidden; 
    height:0; 
    transition: .8s ease; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    border-radius: 5px 5px 0 0; 
} 
.overlay div:first-child{ 
    margin-left: 15px; 
} 
.posts-div:hover .overlay { 
    bottom: 0; 
    top: 0; 
    height: auto; 
    overflow: hidden; 
} 
.img-hover{ 
    position: relative; 
} 
.post-icon{ 
    color: rgba(255, 255, 255, 1); 
    transform: rotate(45deg); 
    opacity: 1; 
} 
.post-icon span{ 
    transform: rotate(-45deg); 
    font-size: 12px; 
    position: absolute; 
    left: 50%; 
    top: 0.6em; 
    margin-left: -7px; 
    color: #101010; 
    font-weight: bold; 
} 
.fa-heart{ 
    color: red !important; 
} 
#contact-us{ 
    height: 200px; 
    margin-bottom: 30px; 
    box-shadow: 0 1px 5px #666666, 0 -1px 5px #666666; 
    position: relative; 
    padding: 0; 
    overflow: hidden; 
} 
#contact-us-text{ 
    position: absolute; 
    top: 20%; 
    left: 12%; 
} 
#contact-us-text p{ 
    color: white; 
} 
#contact-us-text .btn-success{ 
    background-color: #01a89e; 
    cursor: auto; 
} 
#contact-us-text .btn-success:active{ 
    background-color: #01a89e; 
    box-shadow: none; 
} 

JsFiddle

Answer 1

最近短柱類有一個固定的高度。

#recent-posts{ 
    height: 350px; // THIS LINE IS THE REASON! 
    display: flex; 
    justify-content: center; 
    position: relative; 
    flex-wrap: wrap; 
    margin-bottom: 100px; 
} 

Updated fiddle