When a child element overflows horizontally, why is the right padding of the parent ignored?

Question

Given this simple structure:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

with this CSS:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Live demo: http://jsfiddle.net/523me/5/

Notice that the parent has a 20px padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you'll see that the child touches the right edge of the parent.

So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)

Is there a way to force the right padding to be applied in this scenario without having to remove any of the elements from the flow (by floating or positioning)?

enter image description here

Screenshot 1 - The right padding is ignored. This is how all current browsers behave.

Screenshot 2 - The right padding applies. This is what I'm trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)

Is this issue still happening? – Kevin Chandra Aug 18 '21 at 12:06 — Kevin Chandra, Aug 18 '21 at 12:06

score 52 · Accepted Answer · edited Mar 19 '19 at 05:43

52

You're suffering from this problem.

I would solve it by giving a margin to the child (and not a padding to the parent):

body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}

<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>

edited Mar 19 '19 at 05:43

Sumit

2,242
1
24
37

answered Apr 07 '12 at 14:30

Joao

7,366
4
32
48

21

It is interesting that it needs the `inline-block` to work, as `block` [does not do it](http://jsfiddle.net/fwTAS/1/), yet one would think it would. +1 for the link showing research. – ScottS Apr 07 '12 at 14:46
1

@ScottS Yeah, it's the damn browsers, they all have their own interpretations of the CSS specification, as much as they try to uphold it (except the non-standard rogue mess that is IE). `block` and its buddy `inline-block` should share all of their box-model features and differentiate only by inline-block's way of not obstructing page flow and mingling with inline stuff. I'd certainly like to find out more about this specific behavior. – Apr 07 '12 at 15:00
1

@Jota `display:inline-block` risks having two children with small content appear side-by-side: http://jsfiddle.net/523me/20/ +1 from me also for the link. – Šime Vidas Apr 07 '12 at 15:02
@ŠimeVidas--depending on your application intentions, you could [solve the small content issue](http://jsfiddle.net/523me/21/) with a `min-width`. – ScottS Apr 07 '12 at 15:08
@ŠimeVidas Yes, that case! Maybe maintaining the *blockiness* of the child and give it a container for its content: [demo](http://jsfiddle.net/joaope/j4NNC/) – Joao Apr 07 '12 at 15:27
This particular behavior of `display` is an enormous grey area from the spec to its implementation on browsers. `inline-block` rocks as much as it sucks. If you play around with `white-space` you might also get the expected behavior. Again, grey area! – Joao Apr 07 '12 at 15:31
but i have margin-auto on child :// what do i do? – Saravanabalagi Ramachandran Jul 27 '17 at 04:30

score 9 · Answer 2 · answered Apr 07 '12 at 14:15

9

Dunno but adding:

#child{
  display: inline-block;
}

Seems to fix it: http://jsfiddle.net/523me/6/

I've only tested in latest Chrome, may not be cross-browser

answered Apr 07 '12 at 14:15

stephenmurdoch

34,024
29
114
189

1

If I'm not mistaken, inline-block is used to place block elements directly/inline with the text (or inline elements), intermixing it. So the parent block might resolve it as it would *regular text*, and relative to it, parent padding goes the evident 20px around it. But this is more of a hack, that's why it doesn't work in Firefox. Its usage is for specific logical cases where such a layout is preferable. – Apr 07 '12 at 14:29

score 9 · Answer 3 · answered Apr 07 '12 at 14:17

9

You might change the padding to a border.

padding: 20px;

to

border: 20px solid gray;

answered Apr 07 '12 at 14:17

Circle B

1,616
3
26
45

5

The border wraps the scroll-bar which does not look good: http://jsfiddle.net/523me/17/ – Šime Vidas Apr 07 '12 at 14:50
1

This workaround worked for me. I set the border color to a trasparent one. Upvoted! – FonzTech Feb 04 '20 at 17:06
yeah transparent border is still elegant and readable code than having another else, thanks – Nald Dev Jan 31 '21 at 00:46

Mr Lister · Answer 4 · 2012-04-07T14:29:44.257

5

No, the padding is not ignored, but it's still inside the parent.

See updated jsFiddle, where you can see that the padding hasn't moved from its original position.

Edit: Hm, there are some anomalies. If you give the inner div a right margin, that gets ignored too. Hm. Upvoting your question.

edited Apr 07 '12 at 14:29

answered Apr 07 '12 at 14:17

Mr Lister

45,515
15
108
150

I see what you mean. Well, it is what it is, but I don't like it. I would be happier if the padding of the parent were wrapped around the widest child, instead of applying only to those children which don't have a fixed width. – Šime Vidas Apr 07 '12 at 14:26

score 0 · Answer 5 · answered Apr 07 '12 at 14:29

Apply padding-right to overflowing element itself, and move background to its direct child element.

<div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/

When a child element overflows horizontally, why is the right padding of the parent ignored?

5 Answers5

Linked