How to make child divs always fit inside parent div?

My question is if there is a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?

Below is sample markup/styles demonstrating my issue. If you load it into a browser you will see that #two and #three both extend outside their parent, #one, and cause scrollbars to appear.

My issue is not so much the scrollbars, but that I do not know how to tell the child divs to occupy the width or height remaining to them, rather than the full height or width of the parent.

<html>
    <head>
        <style>
            html, body {width:100%;height:100%;margin:0;padding:0;}
            .border {border:1px solid black;}
            .margin { margin:5px;}
            #one {width:100%;height:100%;}
            #two {width:100%;height:50px;}
            #three {width:100px;height:100%;}
        </style>
    </head>
    <body>
        <div id="one" class="border">
            <div id="two" class="border margin"></div>
            <div id="three" class="border margin"></div>
        </div>
    </body>
</html>

I had a similar problem, but in my case, I have content in my div that height-wise will exceed the boundaries of the parent div. When it does, I want it to auto-scroll. I was able to accomplish this by using

.vscrolling_container { height: 100%; overflow: auto; }

you could use display: inline-block;

hope it is useful.

How to make child divs always fit inside parent div?

Related

Recent Posts