Why's my "flex" div not obeying the padding-right?

Question

I have this setup:

img {
  max-height: 100%;
  max-width: 200pt;
  margin-left: 7.5pt;
  margin-right: 7.5pt;
  scroll-snap-align: center;
  border-radius: 10pt;
}

img:first-child {
  /*padding-left: 15pt;*/
  margin-left: auto;
}

img:last-child {
  /*padding-right: 100pt;*/
  margin-right: auto;
}

.images {
  background: orange;
  padding-left: 30pt;
  padding-right: 30pt;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-top: 15pt;
  margin-bottom: 15pt;
  height: 200pt;
  display: flex;
  overflow-x: scroll;
}

.images::-webkit-scrollbar {
  display: none;
}

<div style="min-height: 100%; min-width: 100%;">
  <div class="images">
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
  </div>
</div>

https://jsfiddle.net/ybdfu28a/

As you notice, the images div has a padding-left and padding-right of 30pt. This seems to work fine on the left side but not on the right. The right side's image sticks to the edge when you scroll horizontally.

What am I doing wrong?

EDIT: This is not a duplicate of the linked question as border doesn't work in my case as I explained in the comments.

https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout — sol, Jul 21 '20 at 01:35
@MichaelBenjamin that doesn't work well as I want the pics to scroll into the edges as shown in my initial example whereas using a border prevents that and the pics don't go into the edges on scrolling. — sudoExclaimationExclaimation, Jul 21 '20 at 02:45
@MichaelBenjamin pseudo elements removes all the left and right padding. In this: https://imgur.com/a/cbAujez notice how in first 2 pics of my original code, when scrolled, the pics scroll all the way to the left edges. But in 3rd pic when I use border, it doesn't go into the edges and orange is visible. — sudoExclaimationExclaimation, Jul 21 '20 at 02:58

score 1 · Accepted Answer · answered Jul 21 '20 at 05:09

Since your images div doesn't have a defined width, you can not place a padding on the right,

Here is a solution to add some space on the right of the last image

.images:last-child::after {
  content: "";
  padding-right: 30pt;
}

img {
  max-height: 100%;
  max-width: 200pt;
  margin-left: 7.5pt;
  margin-right: 7.5pt;
  scroll-snap-align: center;
  border-radius: 10pt;
}

img:first-child {
  /*padding-left: 15pt;*/
  margin-left: auto;
}

img:last-child {
  /*padding-right: 100pt;*/
  margin-right: auto;
}

.images {
  background: orange;
  padding-left: 30pt;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-top: 15pt;
  margin-bottom: 15pt;
  height: 200pt;
  display: flex;
  overflow-x: scroll;
}

.images:last-child::after {
  content: "";
  padding-right: 30pt;
} 

.images::-webkit-scrollbar {
  display: none;
}

<div style="min-height: 100%; min-width: 100%;">
  <div class="images">
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
    <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
  </div>
</div>

*"Since your images div doesn't have a defined width, you can not place a padding on the right,"* Okay. But why does padding on the left work? — Michael Benjamin, Jul 21 '20 at 13:08

score 0 · Answer 2 · answered Jul 21 '20 at 04:29

It seems you are doing nothing wrong. Apparently the combination of apply padding to a flex container with an overflow-x causes this unexpected behavior.

I checked your code and solved the problem by adding a parent div "container" with same paddings and margins than "images" div and I put "images" into "container" and I set height and width to 100%.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <style>
        img {
            max-height: 100%;
            max-width: 200pt;
            margin-left: 7.5pt;
            margin-right: 7.5pt;
            scroll-snap-align: center;
            border-radius: 10pt;
        }

        img:first-child {
            /*padding-left: 15pt;*/
            margin-left: auto;
        }

        img:last-child {
            /*padding-right: 100pt;*/
            margin-right: auto;
        }

        .images {
            height: 100%;
            width: 100%;
            background: orange;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            display: flex;
            overflow-x: scroll;
        }

        .images::-webkit-scrollbar {
            display: none;
        }
        .content{
            background: orange;
            margin-top: 15pt;
            margin-bottom: 15pt;
            padding-left: 30pt;
            padding-right: 30pt;
            height: 200pt;
        }
    </style>
</head>

<body>
    <div style="min-height: 100%; min-width: 100%;">
        <div class="content">
            <div class="images">
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
                <img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
        
            </div>
        </div>
    </div>
</body>

</html>

In this blog there are two more ways that you can try and also there is more information about it.

I hope this can help you.

Thank you for helping and welcome to StackOverflow. Unfortunately, this seems to have the same problem as the solution proposed by Michael. In this: https://imgur.com/a/cbAujez notice how in first 2 pics of my original code, when scrolled, the pics scroll all the way to the left edges. But in 3rd pic when I use your way, it doesn't go into the edges and orange is visible. I need the pics to go all the way to the edges without any Orange when scrolled. — sudoExclaimationExclaimation, Jul 21 '20 at 04:51

Why's my "flex" div not obeying the padding-right?

2 Answers2