div不會擴大浮動內容的高度

Question

這個問題已被問及一堆，我已經看過他們（似乎）。我有一個浮動內容的div不會擴展到內容的大小。我已經添加了clear:both（幾乎所有可能的行，其中有效果，但沒有解決它），並且我已經嘗試了overflow:hidden或overflow:auto的幾乎所有元素的排列。只是爲了好的措施，我也嘗試改變divs跨度。

無論我做什麼，如果你最終讓窗口變得足夠瘦，那麼按鈕會落到div區域的下方。爲什麼以及如何修復它？

JSFiddle

.confirmation-modal { 
 
    z-index: 1; /* Sit on top */ 
 
    width: 100%; /* Full width */ 
 
    height: 4rem; 
 
    max-height:18rem; 
 
    overflow: auto; 
 
    text-align: center; 
 
    border-radius:5px; 
 
    
 
} 
 

 

 
.confirmation-raised-panel{ 
 
    background-color: #ffed83; 
 
    padding: 0px; 
 
    text-align: center; 
 
    height: 4rem; /* Full height */ 
 
    max-height:18rem;  
 
     overflow: auto; 
 
} 
 

 
.buttons{ 
 
    float:right; 
 
} 
 

 
.confirmation-message { 
 
    overflow: auto; 
 
    margin: 20px 0 0 30px; 
 
    font-size: 1.2rem; 
 
    font-weight: 400; 
 
    float:left; 
 
} 
 

 
.clear{ 
 
    clear:both; 
 
}

<div class="confirmation-modal"> 
 
    <div class="confirmation-raised-panel"> 
 
     <div class="confirmation-message"> 
 
      This is a big message that takes up a bunch of space. Yes indeed. Do you like it? 
 
     </div> 
 
     <div> 
 
      <div class="buttons">   
 
       <button>Yes, I'm Sure</button> 
 
       <button>Cancel</button> 
 
      </div> 
 
       <br class="clear"/>  
 
     </div> 
 
    </div> 
 
</div>

Answer 1

那麼，你必須在外面的兩個集裝箱height: 4rem; - 這可以防止他們得到任何更高。刪除或使該min-height，和你都設置：

.confirmation-modal { 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    width: 100%; 
 
    /* Full width */ 
 
    min-height: 4rem; 
 
    max-height: 18rem; 
 
    overflow: auto; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
} 
 

 
.confirmation-raised-panel { 
 
    background-color: #ffed83; 
 
    padding: 0px; 
 
    text-align: center; 
 
    min-height: 4rem; 
 
    max-height: 18rem; 
 
    overflow: auto; 
 
} 
 

 
.buttons { 
 
    float: right; 
 
} 
 

 
.confirmation-message { 
 
    overflow: auto; 
 
    margin: 20px 0 0 30px; 
 
    font-size: 1.2rem; 
 
    font-weight: 400; 
 
    float: left; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<div class="confirmation-modal"> 
 
    <div class="confirmation-raised-panel"> 
 
    <div class="confirmation-message"> 
 
     This is a big message that takes up a bunch of space. Yes indeed. Do you like it? 
 
    </div> 
 
    <div> 
 
     <div class="buttons"> 
 
     <button>Yes, I'm Sure</button> 
 
     <button>Cancel</button> 
 
     </div> 
 
     <br class="clear" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你有你的模式（height: 4rem）一個固定的高度，他無法展開。

.confirmation-modal { 
 
    width: 100%; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background-color: #ffed83; 
 
    overflow: hidden; 
 
} 
 

 
.confirmation-message { 
 
    margin: 1rem; 
 
    font-size: 1.2rem; 
 
    font-weight: bold; 
 
} 
 

 
.buttons{ 
 
    float: right; 
 
    margin: 0 1rem 1rem; 
 
}

<div class="confirmation-modal"> 
 
    <p class="confirmation-message">This is a big message that takes up a bunch of space. Yes indeed. Do you like it?</p> 
 
    <div class="buttons">   
 
    <button>Yes, I'm Sure</button> 
 
    <button>Cancel</button> 
 
    </div> 
 
</div>