How to prevent class expand vertically?

[Velociraptor]

Hi,

I want to make the "base area" extend horizontally only
Whenever a new card/image is added, it should extend horizontal not making a new row vertically.

I have tried changing width, using overflow, hide overflow-x, I still can't make functional horizontal scroll for that div since it always extend vertically despite giving a maximum height.

codepen.io/Velocodes/pen/RZMayE


Thanks in advance,

[Tumbleweed]

Aug 21, 2017 6:35:41 GMT -8 Velociraptor said:

Hi,

I want to make the "base area" extend horizontally only
Whenever a new card/image is added, it should extend horizontal not making a new row vertically.

I have tried changing width, using overflow, hide overflow-x, I still can't make functional horizontal scroll for that div since it always extend vertically despite giving a maximum height.

codepen.io/Velocodes/pen/RZMayE


Thanks in advance,

Did you ever figure this out? Well, in case you didn't, in the class .gallery li remove the float left and add display:inline-block;

.gallery li {
display: inline-block;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}

And then in your class .CardList remove all widths/heights and add overflow:auto; and whitespace:nowrap;

.CardList {
border: 3px solid black;
overflow: auto;
white-space: nowrap;
}

Worked on your codepen and on my test site. (at the bottom of the page but I added another div around the whole thing for a width constraint)

[Velociraptor]

No, I didn't figure it out. I knew I have to edit multiple lines of code, I didn't find the correct combo.

Big Thanks!!! I manage to fix another code based on this solution.

[Tumbleweed]

So you are good on this so I can label this as resolved?

[Velociraptor]

Yes, it is resolved.