CODEWITHSUNDEEP
htmlcss
smack-a-bro
smack-a-bro

Reputation: 741

Center absolute positioned overflowing div

This is what I tried and it gets me 99% there.

.polaroids-container {
  overflow-x: auto;
  position: relative;
  height: 245px;
  padding-top: 10px;
  display: -webkit-flex;
  -webkit-justify-content: center;
  display: flex;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.polaroids {
  position: absolute;
  min-width: max-content;
}
<div class="container-fluid">
  <div class="container polaroids-container">
    <div class="polaroids">
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
      <div>Images here</div>
    </div>
  </div>
</div>

enter image description here

This will center my content but the first element in the div is getting cut off on the left. As you can see in the image the scroll bar is all the way to the left so you cannot scroll left to see that content.

The objective here is to center all the divs within class polaroids and not have the first one not get chopped off.

Upvotes: 1

Views: 57

Answers (1)

Nosajimiki
Nosajimiki

Reputation: 1103

Okay, I did a quick fiddle and I see what you're doing now. Add "left:0" to polaroids. Once your alignment is set, then set your scroll to be centered using JavaScript.

.polaroids {
  position: absolute;
  left:0;
  min-width: max-content;
}

<script>
  var polaroidsCont = document.getElementsByClassName("polaroids-container")[0];
  var polaroidsInner = document.getElementsByClassName("polaroids")[0];
  polaroidsCont.scrollLeft = (polaroidsInner.offsetWidth/2 - polaroidsCont.offsetWidth/2);
</script>

Upvotes: 1

Related Questions