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>