How to resize a div container to fit overflow from a child div

Question

I have a div container with a child div inside:

<div id=mainWrapper>
    <div id=child>
    </div>
<div>

 #mainwrapper height:100%, width:900px
 #child height:100%, width:50% overflow:visible float:right

The child div contains a list of elements.

How to I resize the mainWrapper when the overflow from the child is larger than the height of the mainWrapper?

I've tried a bunch of css and also some script: $('#mainWrapper').css('height',$('#child').height());

nothing is working.

score 4 · Answer 1 · edited May 23 '17 at 12:32

4

Use a clearfix after the close of #child. Floated divs need cleared to pull their parent div to the same height.

 <div id=mainWrapper>
     <div id=child>
     </div>
     <div style='clear:both;'><!--clear--></div> 
  <div>

  #mainwrapper height:100%, width:900px  
  #child height:100%, width:50% overflow:visible float:right

Reference: http://www.webtoolkit.info/css-clearfix.html

What methods of ‘clearfix’ can I use?

http://css-tricks.com/snippets/css/clear-fix/

edited May 23 '17 at 12:32

Community

1
1

answered Nov 20 '12 at 15:58

totallyNotLizards

8,489
9
51
85

I'm having trouble with this fix. i set the class of mainwrapper to clearfix. then I add .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } to my css file. and its not working btw my mainWrapper has 2 children divs. one is float right the other is float left. only the float right child has overflow:visible and is causing the problems – A H Nov 20 '12 at 16:17
OK, so you've read up a bit on clearfixes then? Unfortunately not all of them work under all circumstances. General rule of thumb is you want to clear both after your floated content but before closing the parent - which is why I usually find that a `
` or similar works best. So try adding that after your second child but before closing the parent and see if that helps. – totallyNotLizards Nov 21 '12 at 11:20

score 1 · Accepted Answer · answered Nov 20 '12 at 16:01

1

Set overflow: auto on mainwrapper:

#mainwrapper {
    width:900px
    overflow: auto;  
}

Its the hasLayout thing when using floats.

answered Nov 20 '12 at 16:01

Damien Overeem

4,487
4
36
55

but i don't want overflow:auto. I want the children to overflow:visible and I want the mainwrapper to re-size its height to fit the overflow – A H Nov 20 '12 at 16:34
Thats actually what this does.. you wont get scrollbars unless the child exceeds 900px width. Need to remove the height of it though, otherwise you also get scrollbars. Did you actually tru this option? – Damien Overeem Nov 20 '12 at 17:25

score 0 · Answer 3 · answered Jan 31 '18 at 07:26

_{Written as a new answer because comments can be easily overlooked. Credits to Damien Overeem}

In order to achieve overflow:visible for the child and the mainwrapper to resize to the height of the overflow, remove the height attribute from both the child and the mainwrapper.
In the mainwrapper, set overflow: auto.

How to resize a div container to fit overflow from a child div

3 Answers3