div won't expand height for floating contents - html

Question

This question has been asked a bunch and I've looked at them all (seemingly). I have a div with some floating content that won't expand to the size of the content. I've added clear:both (to literally every possible line, which has effects, but doesn't solve it), and I've tried every permutation of overflow:hidden or overflow:auto on pretty much every element in here. Just for good measure I have also tried changing the divs to spans.
Whatever I do, if you make the window skinny enough eventually the buttons fall below the area of the div. Why and how can I fix it?
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

Well, you have height: 4rem; in the outer two containers - this prevents them from getting any higher. Delete that or make that min-height, and you are all set:
.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

You have a fixed height for your modal (height: 4rem), he can't expand.
.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>