How to make child divs always fit inside parent div

Question

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    lt html gt       lt head gt           lt style gt              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             lt  style gt       lt  head gt       lt body gt           lt div id  one  class  border  gt               lt div id  two  class  border margin  gt  lt  div gt               lt div id  three  class  border margin  gt  lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

If I ve understood you correctly  the easiest method is to float the children  For example    one   width  500px  height  1   overflow  hidden  background  red     two   float  left  width  250px  height  400px  background  aqua     two   float  left  width  250px  height  200px  background  lime      Setting a dimension  height width  and overflow to auto or hidden on the parent element causes it to contain any floated child elements   Note that overflow hidden  can occasionally cause problems with content getting cut off  in which case you might want to try this alternative method   http   www positioniseverything net easyclearing html

User · Answer

I think I have the solution to your question  assuming you can use flexbox in your project  What you want to do is make  one a flexbox using display  flex and use flex-direction  column to make it a column alignment    x000D   x000D  html  x000D  body   x000D    width  100   x000D    height  100   x000D    margin  0  x000D    padding  0  x000D    x000D   x000D   border   x000D    border  1px solid black  x000D    x000D   x000D   margin   x000D    margin  5px  x000D    x000D   x000D   one   x000D    width  100   x000D    height  100   x000D    display  flex  x000D    flex-direction  column  x000D    x000D   x000D   two   x000D    height  50px  x000D    x000D   x000D   three   x000D    width  100px  x000D    height  100   x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  one  class  border  gt  x000D       lt div id  two  class  border margin  gt  lt  div gt  x000D       lt div id  three  class  border margin  gt  lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

For width it s easy  simply remove the width  100  rule   By default  the div will stretch to fit the parent container     Height is not quite so simple   You could do something like the equal height column trick   html  body  width 100  height 100  margin 0 padding 0    border  border 1px solid black    margin   margin 5px    one  width 500px height 300px  overflow  hidden    two  height 50px    three  width 100px  padding-bottom  30000px  margin-bottom  -30000px

User · Answer

If you want the child divs to fit the parent size  you should put a margin at least of the size of the child borders on the child divs  child margin  gt   child bordersize    For this example  just remove the width 100   and the height 100  in  one and remove the width 100  in  two  It should be something like this   html  body  width 100   height 100   margin 0  padding 0        border  border 1px solid black       margin  margin 5px       one         two  height 50px         three  width 100px  height 100

User · Answer

you could use display  inline-block   hope it is useful

User · Answer

Make sure the outermost div has the following CSS properties    outer                 height  auto    overflow  hidden

User · Answer

For closure  I think the answer to this question is that there is no solution   The only way to get the behavior I want is with javascript

User · Answer

There are two techniques commonly used for this    Absolute Positioning Table Styles   Given the HTML you provided here is the solution using Absolute positioning    x000D   x000D  body  one   x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    width  auto  x000D    height  auto  x000D    x000D  body  two   x000D    width  auto    x000D    x000D  body  three   x000D    position  absolute  x000D    top  60px  x000D    bottom  0  x000D    height  auto  x000D    x000D   lt html gt  x000D   lt head gt  x000D   lt style gt  x000D  html  body  width 100  height 100  margin 0 padding 0   x000D   border  border 1px solid black   x000D   margin   margin 5px   x000D   one  width 100  height 100    x000D   two  width 100  height 50px   x000D   three  width 100px height 100    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D    lt div id  one  class  border  gt  x000D     lt div id  two  class  border margin  gt  lt  div gt  x000D     lt div id  three  class  border margin  gt  lt  div gt  x000D    lt  div gt  x000D   lt  body x000D   x000D   x000D    You can always just use the table  tr  and td elements directly despite common criticisms as it will get the job done    If you prefer to use CSS there is no equivalent for colspan so you will likely end up with nested tables   Here is an example    x000D   x000D  html  body   x000D    height  100   x000D    margin  0  x000D    padding  0  x000D    width  100   x000D    x000D   one   x000D    box-sizing  border-box  x000D    display  table  x000D    height  100   x000D    overflow  hidden  x000D    width  100   x000D    border  1px solid black  x000D    x000D   two   x000D      box-sizing  border-box  x000D      display  table  x000D      height  50px  x000D      padding  5px  x000D      width  100   x000D    x000D   three   x000D    box-sizing  border-box  x000D    display  table  x000D    height  100   x000D    padding-bottom  60px  x000D    padding-left  5px  x000D     x000D    x000D   four   x000D    display  table-cell  x000D    border  1px solid black  x000D    x000D   five   x000D    display  table-cell  x000D    width  100px  x000D    border  1px solid black  x000D    x000D   six   x000D    display  table-cell    x000D    x000D   lt html gt  x000D    lt div id  one  gt  x000D        lt div id  two  gt  x000D               lt div id  four  gt  lt  div gt  x000D           lt  div gt  x000D           lt div id  three  gt  x000D               lt div id  five  gt  lt  div gt  x000D               lt div id  six  gt  lt  div gt  x000D           lt  div gt  x000D    lt  div gt  x000D     lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

you could use inherit   one  width 500px height 300px    two  width inherit height inherit    three  width inherit height inherit

User · Answer

In your example  you can t  the 5px margin is added to the bounding box of div two and div three effectively making their width and height 100  of parent   5px  which will overflow   You can use padding on the parent Element to ensure there s 5px of space inside its border    lt style gt      html  body  width 100  height 100  margin 0 padding 0        border  border 1px solid black        one  padding 5px width 500px height 300px        two  width 100  height 50px        three  width 100px height 100     lt  style gt    EDIT  In testing  removing the width 100  from div two will actually let it work properly as divs are block-level and will always fill their parents  widths by default  That should clear your first case if you d like to use margin

[html] How to make child divs always fit inside parent div?

Examples related to html

Examples related to css

Examples related to parent