0

This's my code:

<HStack width={"full"} overflowX={"auto"}>
   <Button>1</Button>
   <Button>2</Button>
   <Button>3</Button>
   <Button>4</Button>
   <Button>5</Button>
</HStack>

I've try overflow={"hidden"} for a Htack is the parent of this HStack but nothing happened

tiennl
  • 41
  • 6
  • 1
    You are missing height. To be able to scroll the height of the container should be less than the total elements height in the container together – Joy Dey Mar 09 '22 at 08:53
  • Does this answer your question? [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) – Priya jain Mar 09 '22 at 08:56
  • @JoyDey I want to scroll horizontally – tiennl Mar 09 '22 at 08:57
  • @Priyajain I tried following that link but it not working – tiennl Mar 09 '22 at 08:58

1 Answers1

3

Try like this

.scrolling-section {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll; // Add the ability to scroll y axis
}

// Hide scrollbar for Chrome, Safari and Opera
.scrolling-section::-webkit-scrollbar {
    display: none;
}

// Hide scrollbar for IE, Edge and Firefox
.scrolling-section {
  -ms-overflow-style: none;  // IE and Edge
  scrollbar-width: none;  // Firefox
}

Then give this className to your division

Harry
  • 523
  • 1
  • 12