0

I read through this question and didn't see if there is a solution to my issue.

I've created a CodePen that shows this issue. I would like everything to the left and right (overflow-x) of the red border to be hidden, but keep the top and bottom (overflow-y) visible.

Any ideas on how to achieve this affect?

katart
  • 129
  • 1
  • 2
  • 11

1 Answers1

0

update your .movie-posters style to this. And check if this is what you are looking for.

.movie-posters {
  position: relative;
  width: 800px;
  height: 450px;
  margin: 6rem auto;
  border: 4px solid red;
  overflow-x:hidden;
}

i had to increase the height to make it look normal.

Vilvan
  • 71
  • 5
  • Thanks for the replay @Vilvan. So the way to make this visible is by expanding the parent element. I was hoping there was a cleaner way. – katart May 26 '17 at 19:53