Overflow to scroll not working without height

Question

Why overflow: scroll; works only after setting the height to 1000px, here?

Answer

In order for overflow to work on an element’s content, the element needs to have a definite measurement, otherwise, the element container will keep on expanding to accommodate as many content elements it can have or no matter the content’s size, but if the container element has a set height or a cap height ( max-height), once its content reaches those limits, it will follow the overflow rule, which in case of scroll, it will hide any content that should be surpassing the height of the container, and it will allow us to see it by dragging a scroll bar.

12 Likes

What about those content that spill from the width, does scroll cause those spill to warp inside the container?

9 Likes

Are there cases where one would deliberately want to use the overflow property and what cases are those?

Or does it only come when you may have made your container a definite size through oversight, and then subsequently want to avoid the problem of overflow with its content?

I noticed that even if there is enough vertical height in the page to display all of the content, the scroll bars still appear. Is there a way to make them appear only when they’re needed (like when a page is shrunk)?

Another question – the lesson summary states that an image example has a height of 244px due to the following attributes:

  • 300 pixels wide
    
  • 200 pixels tall
    
  • 10 pixels padding on the left and right
    
  • 10 pixels padding on the top and bottom
    
  • 2 pixels border on the left and right
    
  • 2 pixels border on the top and bottom
    
  • 20 pixels margin on the left and right
    
  • 10 pixels margin on the top and bottom
    

If there were two identical images on top of one another in the layout, would the height for one of them actually be 234px due to margin collapse, or is that 10px difference “shared” by the two adjacent images?

3 Likes

If content overflows from the width of its container, there will be a horizontal scrollbar allowing us to view the overflowed content by scrolling

3 Likes

The overflow property is used to specify what should happen to overflowed content:
Should it be visible, hidden or should the browser provide us with a scrollbar which we can use to view the overflowed content

2 Likes

In this case, you would use media queries. Media queries allow us to modify the styling of our web page depending on a screen size. In this case, we would use a media query to assign scroll to the overflow property when the screen size is ??px

Yes. If we added two images with the above properties and values, the vertical margins will collapse, however, they will be shared meaning if you inspect the box model of both images, they will both have equal margins. However, I wouldn’t say they are shared, I imagine the margins not stacking but being on the same y-axis

3 Likes

thanks :grinning: :grinning: :grinning:

1 Like

i don’t understand why setting height=1000px makes the bottom share buttons overlap into top? why doesn’t it push it down? other than that there is no other changes that i see. Seems odd What is the explanation?

1 Like

i am not sure but i think its because having a large height and a small margin(for the #main div) make it to overflow. effectively making the MARGIN to be on inside(?). thus the bottom div get positioned below the margin to appear overlapped(?)

…you can also use the overflow-x: scroll; to show it spills along the x - axis.

In the HTML, this div is what we set to 1000px height:
<div id="main" class="content">

The very next next div has the share buttons:
<div class="share">

Thus, the share buttons will show up below the 1000px height, plus any margins, border, etc.

The reason it LOOKS like the share buttons are on top of the main element is because the text content of the main element is OVERFLOWING and the overflowing text is now sharing space with the elements below it. Once the overflow issue is taken care of, the share button issue resolves.

4 Likes

Thanks for this answer. It helped me understand why the buttons LOOKED like they were on top of the main content after the height was set to 1000px. I added a border to #main to see this effect. As you explained the buttons are still coming after the #main.

2 Likes

I noticed there hasn’t been any questions about using the overflow for tables. Is there a way to have the overflow: scroll; work with them?

In the site’s code editor I tried resizing my page after implementing the overflow code, but the box never gained a scroll bar even after setting the height for 1000px.