CODEWITHSUNDEEP
htmlcss
Mahaveer
Mahaveer

Reputation: 435

Why is padding right clipped with overflow:scroll

In the snippet below, padding-right for .ctr is not visible when content starts to overflow at small viewports.

I've read other answers and I know how to fix it. I just need to move padding:20px from .ctr to .row. Or just add margin-right:20px to last child.

But, I couldn't find the reason as to why this happens. Could someone please explain, what's going on? any resource for further learning will be highly appreciated 🙏

Thanks!

.ctr {
  display: flex;
  overflow-x: auto;
  padding: 20px;
}

.row {
  margin: 0 auto;
  display: flex;
}

.child {
  margin-right: 20px;
  width: 600px;
  height: 100px;
  background: red;
}

.child:last-child {
  margin-right: 0;
}
<div class="ctr">
  <div class="row">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Upvotes: 1

Views: 1508

Answers (3)

Jhon Morris
Jhon Morris

Reputation: 21

I had a similar problem, not exactly the same but very close to this. Adding : min-width: max-content; to the parent component made right paddings and margins show. (I kind of know why... It has to do with the width of the parent component in comparison to the width of the body when there's a visible overflow. But I don't know how to explain it because my english isn't the best. I wish they had a better default behaviour than cutting only right margins/paddings)

Upvotes: 1

Deadpool
Deadpool

Reputation: 8240

Dude the reason is the rendering or calculation in browsers (or the logic or system that we have developed starts from the top/left and ends at right/bottom). So, padding the hierarchy of placement is:

margin > border > padding > content

(And, remember it starts with top/left).

Now the issue you are seeing is only because you have not increased the height of item. If you do so - You will not only find issue on the right-padding but also on the bottom-padding.

Padding is only an effort to wrap something which is flexible. When you give a 600 * 5 width to items then they take more width than available.

padding is not as strong contender like margin. Because, margin you apply on same element - whose width or height you are manipulating. padding is being applied on an element which is trying to impose restrictions on some other element (usually direct child). So, this is the difference between padding and margin and how they get applied on browsers via Box-Model.

Hope, this clarifies a bit.

Upvotes: 1

user7148391
user7148391

Reputation:

The padding is actually there when the content overflow it hides it.

we can illustrate this using background and background-origin

.container {
  display: flex;
  overflow-x: auto;
  padding: 20px;
  width: 200px;
  background: linear-gradient(red, red) no-repeat;
  background-origin: content-box;
  border: 1px solid;
}

.overflow {
  background: pink;
  min-width: 400px;
  height: 100px;
  border: 1px solid;
}
<div class="container">
  <div class="overflow"></div>
</div>
the white space you see on the edges is the padding

background-origin: content-box; makes the background exclude border and padding which will show us that the padding isn't clipped only covered, this happens because padding is part of the parent and the content overflow the parent so it covers it.

There's nothing special about this.

Upvotes: 1

Related Questions