Kevin Powell - Community•3y ago

Horizontal scrolling

I want the 1000px container to have horizontal scrolling when going below 1000px. The 800px container requires to have a fixed width, that's why. Is there any way to achieve this? Documentation I could be point out to?

6 Replies

Sinc02•3y ago

How about overflow: auto? The parent won't show the scroll unless the content is actually overflowing More precisely: overflow-x: auto if you want horizontal scrolling only

MyndiOP•3y ago

Yeah, I think I've figured half the problem. The text is breaking, that's what causing it to not overflow. I was trying to make the text's div to have a fixed width as well.

MyndiOP•3y ago

https://gyazo.com/94ca8e5257457bee092cfb4f2fc27495

Gyazo

MyndiOP•3y ago

What could be causing this? 🤔 So, I'm understanding here that, since the left side has fixed width, it gets "eaten" somehow. So I guess the next solution is to somewhat make it push to the right? OK NVM I FIGURED IT OUT.

MyndiOP•3y ago

https://gyazo.com/5c35b6c60e4c0bb12b070da4fc97a2a1

Gyazo

MyndiOP•3y ago

Because it was being justified to the center, it ate part of the div. That's a weird behavior. I just threw this in:

.gear-container {
  display: flex;
  justify-content: center;
  
  border-radius: .5em 0 .5em .5em;
}

@media only screen and (max-width: 1130px){
  .gear-container {
    overflow-x: scroll;
    justify-content: start;
  }
}

.gear-container {
  display: flex;
  justify-content: center;
  
  border-radius: .5em 0 .5em .5em;
}

@media only screen and (max-width: 1130px){
  .gear-container {
    overflow-x: scroll;
    justify-content: start;
  }
}

Looks quite gross, so if anybody else has a better solution, or less gross, is also welcomed.

Gaming

Programming

Horizontal scrolling