# scrollbar in ui component

**URL:** <https://community.hubspot.com/t/scrollbar-in-ui-component/105992>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [April 29, 2024, 11:28am UTC](https://community.hubspot.com/t/scrollbar-in-ui-component/105992 "2024-04-29T11:28:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![syllametrics](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@syllametrics](https://community.hubspot.com/u/syllametrics)\
**Post date:** [April 29, 2024, 11:28am UTC](https://community.hubspot.com/t/scrollbar-in-ui-component/105992/1 "2024-04-29T11:28:54Z")

</div>

How do we handle over flow of Ui component i just want to add scrollbar to Box ,or a Flex ,or Table Component

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [April 30, 2024, 9:24am UTC](https://community.hubspot.com/t/scrollbar-in-ui-component/105992/2 "2024-04-30T09:24:55Z")

</div>

Hi @syllametrics

Here’s how you can do it for each of the components you mentioned:  
1. Box Component: You can create a box component using a \<div\> element and apply CSS styles to add a scrollbar when needed.  
.box {  
width: 300px;  
height: 200px;  
overflow: auto; /\* or overflow: scroll; \*/  
}  
Then, in your HTML:  
\<div class=“box”\>  
\<!-- Your content here --\>  
\</div\>  
2. Flex Container: For a flex container, you can use the same CSS properties to handle overflow:  
.flex-container {  
display: flex;  
flex-direction: column; /\* or row \*/  
width: 100%;  
height: 200px;  
overflow: auto; /\* or overflow: scroll; \*/  
}  
Then, in your HTML:  
\<div class=“flex-container”\>  
\<!-- Your content here --\>  
\</div\>  
3. Table Component: Similar to the other components, you can wrap your table inside a container and apply CSS styles to handle overflow:  
.table-container {  
width: 100%;  
height: 200px;  
overflow: auto; /\* or overflow: scroll; \*/  
}  
Then, in your HTML:  
\<div class=“table-container”\>  
\<table\>  
\<!-- Table content here --\>  
\</table\>  
\</div\>  
In all cases, adjust the width, height, and overflow properties according to your requirements. The overflow property with a value of auto or scroll will add scrollbars when the content exceeds the dimensions of the container.

I hope this will help you out. Please mark it as **Solution Accepted and upvote** to help another Community member.  
Thanks!