CODEWITHSUNDEEP
htmlcss
Zack Plauché
Zack Plauché

Reputation: 4280

overflow-x scroll ignoring margin / padding right

I'm trying to make a carousel (run snippet below) that:

  1. scrolls left to right
  2. has equal amount of space on both sides of the inside of the carousel
  3. makes it to where the first and last inner elements are centered when the scrollX value is all the way to the left or the right.

The issue I'm facing is that neither margin NOR padding is working on the right side of the carousel and is only displaying on the left.

To see the exactly what I'm talking about, run the snippet below, scroll all the way to the right, and compare to when the carousel is scrolled all the way to the left (Day 7 should be in the middle of the div at the end):

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-wrapper {
  position: relative;
}

/* Arrows (ignore them, they don't work yet) */

.carousel-wrapper::before,
.carousel-wrapper::after {
  content: "";
  border-top: 2px solid black;
  border-right: 2px solid black;
  position: absolute;
  height: 10px;
  width: 10px;
  top: calc(50% - 5px);
  cursor: pointer;
}

.carousel-wrapper::before {
  transform: rotate(-135deg);
  left: -20px;
}

.carousel-wrapper::after {
  transform: rotate(45deg);
  right: -20px;
}

/* Where overflow hidden and overflow-x: scroll is */

.carousel {
  border: 1px solid black;
  background-color: #21abde;
  overflow: hidden;
  overflow-x: scroll;
  width: 300px;
}


/* PROBLEM AREA (where the margin and padding should be but isn't working */

.links {
  display: flex;
  transform: skew(-15deg);
  flex-shrink: 0;
  margin: 0 100px;
  margin-right: 100px;
}

/* Anchors */

a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #21abde;
  width: 100px;
  height: 50px;
  flex-shrink: 0;
  text-decoration: none;
}

a span {
  transform: skew(15deg);
}

a:hover {
  background-color: #044c66;
}
<body>
  <h1>Dates</h1>
  <nav class="dates">
    <div class="carousel-wrapper">
      <div class="carousel">
        <div class="links">
          <a href=""><span>Day 1</span></a>
          <a href=""><span>Day 2</span></a>
          <a href=""><span>Day 3</span></a>
          <a href=""><span>Day 4</span></a>
          <a href=""><span>Day 5</span></a>
          <a href=""><span>Day 6</span></a>
          <a href=""><span>Day 7</span></a>
        </div><!-- Padding / margin should be showing up here -->
      </div>
    </div>
  </nav>
  <script src="app.js"></script>
</body>

Now that you've seen the code snippet...

2 questions:

  1. Why is overflow hidden NOT accounting the padding on the right side of the links div
  2. How do you make it show up?

Thanks guys!

Upvotes: 2

Views: 1843

Answers (1)

Jan-Philipp Marks
Jan-Philipp Marks

Reputation: 1549

Add this to you .items class:

width: max-content; padding: 0 100px;

Remove the margin and margin-right!

Upvotes: 3

Related Questions