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

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>

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

You might change the padding to a border.

padding: 20px;

border: 20px solid gray;

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

Related

Recent Posts