No padding when using overflow: auto

overflow scroll padding-right
overflow scroll padding-bottom
css overflow
scroll-padding-top not working
change padding on scroll
scrollbar padding
scroll-padding support
css scroll snap padding

I can't get padding-bottom to work when I use overflow-y: auto on a box.

HTML:

<div id="container">
    <div id="some_info"></div>
</div>

CSS:

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
}

Fiddle.

EDIT: I use Firefox

One more solution without extra DIVs.

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

Working in FF, Chrome, IE8-10.

overflow:scroll and The Right Padding Problem, you have a parent div with overflow:scroll and some padding; inside this This is not always easy with position:absolute as the :last-child is not� The overflow is clipped, and the rest of the content will be invisible: Play it » scroll: The overflow is clipped, but a scroll-bar is added to see the rest of the content: Play it » auto: If overflow is clipped, a scroll-bar should be added to see the rest of the content: Play it » initial: Sets this property to its default value. Read

I'm late to the party, but I thought it was worth adding a different solution that addresses some of the concerns raised above.

I came here because of exactly the kind of situation that @Philip raised in response to Alexandre Lavoie's solution: I have dynamically generated content inside the container, so I can't just apply styling to a specific div name like #some_info.

Happily, there's a simple solution for browsers that support CSS3: instead of applying bottom padding to the container, apply a bottom margin to the last child element inside the container.

#container > :last-child {
    margin-bottom: 3em;
}

As long as the last child element in the container div is a block-level element, this should do the trick.

DEMO: http://jsfiddle.net/rwgZu/240/

P.S. If Firefox's failure to scroll to the bottom of the padding is indeed a bug (as suggested by @Kyle), it still hasn't been fixed as of Firefox 47.0. Frustrating! Internet Explorer 11.0.9600.17843 exhibits the same behavior. (Google Chrome, in contrast, shows the bottom padding as expected.)

scroll-padding, scroll-padding is part of the CSS Scroll Snap Module. A simple example would be using scroll-padding to create some fixed spacing of 50px at the Chrome does not currently support longhand-format scroll-padding and� auto - Similar to scroll, but it adds scrollbars only when necessary Note: The overflow property only works for block elements with a specified height. Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

Here is a possible approach that is working perfectly :

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}

[css-overflow-3] Clarify padding-bottom in overflow content � Issue , Overflow 3 is clear about it - padding should be included - but it's not didn't want to trigger scrollbars for overflow: auto unless visible content was Firefox padding issue with elements that overflow patternfly/patternfly#1405. If overflow-x is hidden, scroll or auto and this property is visible (default) it will implicitly compute to auto. Values visible Content is not clipped and may be rendered outside the padding box's top and bottom edges. hidden Content is clipped if necessary to fit vertically in the padding box. No scrollbars are provided. clip

The solutions above were not working for my needs, and I think I stumbled on a simple solution.

If your container and overflowing content share the same background color, you can add a top and bottom border with the color matching the background color. To create equal padding all around, set the border width equal to the left and right padding of the container.

Link to modified version of OP's fiddle: http://jsfiddle.net/dennisoneil/rwgZu/508/

A simple example below.

Note: Stack Overflow puts the snippet results into an overflow scroll, which makes it a little harder to see what's going on. The fiddle may be your best preview option.

#container {
  background: #ccc;
  overflow-y: scroll;
  height: 190px;
  padding: 0 20px;
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
}
#overflowing {
  background: #ccc;
}
<div id="container">
  <div id="overflowing">
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>    
  </div>
</div>

Flexbox and padding, If you have tried to apply padding to a flex container with an horizontal overflow behaviour of scroll, you might notice that the padding is not� Otherwise, both overflow-x and overflow-y are set to the same value. Values visible Content is not clipped and may be rendered outside the padding box. hidden Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed.

Demo

Hi now used to this css

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0; // add this line in your css
}

#some_info {
    height: 900px;
    background: #000;
    margin-bottom:3em; // add this line in your css
}

Demo

scrolling (overflow) and padding, When the parent box has horizontal padding and overflow:auto (or scroll), It moves with the scrolling, but always stays at the end of the non-overflowing� But I have been dealing with a problem. I have a five set of images in slideshow inside a div element and the layout of the webpage is properly fluid. Using overflow on the div element either adds scrollbars to the div element or cuts the image (which looks very awkward). Please suggest me something so that the image doesn’t overflow.

scroll-padding-bottom, The scroll-padding-bottom property defines offsets for the bottom of This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. CSS Scroll Snap Module Level 1 I'm okay with Mozilla handling my info as explained in this Privacy Policy. CSS Padding. The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

scroll-padding, The scroll-padding property is a shorthand property that sets all of This will generally be 0px , but the user agent is free to detect and do something else if a non-zero value is more appropriate. CSS Scroll Snap Module Level 1 I'm okay with Mozilla handling my info as explained in this Privacy Policy. Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0 . Here’s a simple example:

Element size and scrolling, padding : 20 px ; overflow : auto ; } </ style >. It has the border, padding and scrolling. The full set of features. There are no margins, as they� There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption. Let’s take a look at each and then discuss some common uses and quirks. Visible. If you don’t set the overflow property at all, the default is visible.

Comments
  • I see even padding (red) around all edges.
  • AHa, maybe it's just Firefox?
  • This is working as you've told it to. Did you expect a different result?
  • I confirm the problem in FF17
  • W3C has to resolve this issue, hopefully they'll choose the behavior of Chrome! github.com/w3c/csswg-drafts/issues/129
  • Any way to make it work for the right side? In Firefox the horizontal scroll ends when the content is right on the edge of the box, and it ignores extra padding.
  • If you wouldn't mind explaining, why the 50px? Is this value specific to the css in the question or could it work for anyone?
  • @Booligoosh, the 50px is the size for the "padding". To be more accurate, this should be 3em to reflect the example within the question.
  • @isHristov so as I understand it 50px is just a demo value?
  • @Booligoosh, that is correct. You can set any value you want and that will be the "padding".
  • Thanks, Yeah, that's a solution, but let's say that #some_info is dynamic information and not always tagged as #some_info...
  • It depends on the content of course, you can also keep an inner div.
  • using border with matching background color works best for me
  • This works because there's no content. When you add content, it overlaps everything in there, even the padding! Any border, margin or other even container without content is collapsed inside the scrolling div (at least in chrome 43)
  • Doesn't work if you use height: 100vh, which is my case.