How to create a horizontal overflow?

1

Next, I'm editing a site using wordpress and I have some limitations on using html and etc, I wanted to create a horizontal overflow so that instead of being as in the image below, the scrollbar was horizontal rather than vertical. / p>

to leave thus, with vertical scrolling, the css is:

.scrolling-wrapper {

max-height: 500px;
 overflow-x: scroll;
}

The scrolling-wrapper would be the div that all of these products are, and all products have the .card-destq class

    
asked by anonymous 11.09.2018 / 20:32

1 answer

1

I do not know exactly what HTML structure you have there from containe and div s. But here is a simple example made with flexbox that can help you.

.box {
	min-width: 200px;
	height: 100px;
	background-color: red;
	margin: 1rem;
}
.scrolling-wrapper {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
}
<div class="scrolling-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
    
11.09.2018 / 20:40