Make div extend to fit content

Question

I have a div (blue border) contains content. If the content expands, it suddenly does not fit the div. How to I make the div extend so that the content is still contained?

Consider the following demonstration. Once I expand the collapsible, it goes beyond my nice blue border. Can I extend it?

So far display:table-cell might do the job. But this will destroy all the 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;
}


    
        
            
            
                Click Here
            
            
                a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a

Edit.: Minimized example.

Rafael · Accepted Answer

You should remove all height definitions for .page, just keep min-height and - since the expandable menu has float: right - you should prevent floating content from escaping the container. This can be done in multiple ways, e.g. by setting .page { display: table; } or .page { overflow: hidden; }.

Make div extend to fit content

Answers (2)

Related Questions