CODEWITHSUNDEEP
htmlcssbrowseroverflow
Šime Vidas
Šime Vidas

Reputation: 185933

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

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.)

Upvotes: 97

Views: 30222

Answers (7)

Konstantin Vertinskiy
Konstantin Vertinskiy

Reputation: 93

Alternativrely you can make flex container:

#parent {
  width: 100%;
  height: 140px;
  overflow-x: scroll;
  background: blue;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#wrapper {
  flex: 1 1 auto;
  padding: 12px;
}
#child {
  background: yellow;
  width: 5000px;  
  height: 100%;   
}
<div id="parent">
  <div id="wrapper">
    <div id="child">Lorem ipsum</div>
  </div>
</div>

Upvotes: 0

Andy Brown
Andy Brown

Reputation: 5522

You could add a right margin to the last child. Something like:

shared-client-logos shared-client-logo:last-of-type img {
margin-right: 20px; }

I know this works because I've just used it (this will add 20px margin to the right of any image within the last shared-client-logo element within the shared-client-logos tag).

Upvotes: 0

Joao
Joao

Reputation: 7486

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>

Upvotes: 56

Mr Lister
Mr Lister

Reputation: 46579

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.

Upvotes: 5

Marat Tanalin
Marat Tanalin

Reputation: 14123

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/

Upvotes: 0

Circle B
Circle B

Reputation: 1674

You might change the padding to a border.

padding: 20px;

to

border: 20px solid gray;

Upvotes: 9

stephenmurdoch
stephenmurdoch

Reputation: 34613

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

Upvotes: 9

Related Questions