I'm experiencing an issue where the content within a div with a blue border exceeds the boundaries of the div when it expands. How can I make sure that the div extends to contain all the content?
Here is a demonstration of the problem: When I expand the collapsible section, it overflows the nice blue border. Is there a way to extend the div to fit?
One potential solution I have considered is using display:table-cell, but this might interfere with other formatting.
.page {
margin-top: 2%;
height: 100px;
min-height: 88%;
box-shadow: 3px 3px 5px 6px #240ACF;
margin-bottom: 70px;
background-color: #fffbf9
}
.container {
position: relative;
float: right;
width: 590px;
height: inherit
}
.accordion .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion>input[type="checkbox"]:checked~.content {
height: auto;
overflow: visible;
}<div class="page">
<div class="container" >
<section class="accordion">
<input type="checkbox" name="collapse2" id="handle2">
<h2 class="handle ">
<label for="handle2">Click Here</label>
</h2>
<div class="content">
<p>a<br>a<br>a<br>a...</p> /* Content continues here */
</div>
</section>
</div>
</div>Edit.: Simplified example provided.