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

user_1634905 0
Viewed 100

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.

flexbox css html
2 Answers

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>

user_85719450

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.

user_139666320
Related