div wird die Höhe für floating Inhalt nicht erweitern

Question

Diese Frage wurde ein Haufen gestellt und ich habe sie alle (scheinbar) angeschaut. Ich habe ein Div mit einigen Floating-Inhalten, die nicht auf die Größe des Inhalts erweitert werden. Ich habe clear:both hinzugefügt (zu buchstäblich jeder möglichen Linie, die Effekte hat, aber löst es nicht), und ich habe jede Permutation von overflow:hidden oder overflow:auto auf so ziemlich jedem Element hier versucht. Nur für ein gutes Maß habe ich auch versucht, die Divs zu Spannen zu ändern.

Was auch immer ich mache, wenn du das Fenster dünn genug machst, fallen die Knöpfe schließlich unter den Bereich des Div. Warum und wie kann ich es reparieren?

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

Nun, haben Sie height: 4rem; in den äußeren beiden Behälter - dies verhindert, dass sie alle immer höher. Löschen das, oder dass min-height machen, und Sie sind alle gesetzt:

.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

Sie haben eine feste Höhe für Ihre modal (height: 4rem), kann er sich nicht erweitern.

.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>