1

So I have this flex full width container with some objects inside. It also has a horizontal scrollbar. The objects inside are loaded dynamically so they could be 2 or 15, different width also. As you can see they are centered inside the container.

If you reduce the browser window width size to the point ojects won't fit inside container, the scrollbar won't let me scroll to the first object.

I'm sorry if it's not clear, doing my best with language. I really hope you can help me.

.container {
  width: 100%;
  height: 40px;
  background: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overflow-y: hidden;
}

.object {
  padding: 8px 30px;
  color: white;
  white-space: nowrap;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}
<div class="container">
  <div class="object one">THIS IS CHILD ONE</div>
  <div class="object two">THIS IS CHILD TWO</div>
  <div class="object three">THIS IS CHILD THREE</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
6r0pius
  • 65
  • 8
  • the main answer deal with top/bottom but you will also find the fix for right/left which is somehow the same – Temani Afif Sep 08 '18 at 19:54
  • This is just to let you know that there is a Spanish version of Stack Overflow, if you happen to be more comfortable with Spanish – enxaneta Sep 08 '18 at 19:57

0 Answers0