# overflow scroller not working

**URL:** <https://community.hubspot.com/t/overflow-scroller-not-working/147606>\
**Category:** APIs & Integrations\
**Created:** [March 24, 2026, 6:54am UTC](https://community.hubspot.com/t/overflow-scroller-not-working/147606 "2026-03-24T06:54:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SagarTomar](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@SagarTomar](https://community.hubspot.com/u/SagarTomar)\
**Post date:** [March 24, 2026, 6:54am UTC](https://community.hubspot.com/t/overflow-scroller-not-working/147606/1 "2026-03-24T06:54:48Z")

</div>

const dataList= ({ list }) =\> (

\<Box style={{ height: 300, overflow: ‘auto’ }}\>

{(list || []).map((m, i) =\> (

\<Flex

key={i}

direction=“column”

align={m.from === ‘user’ ? ‘end’ : ‘start’}

gap=“xs”

\>

\<Alert variant={m.from === ‘user’ ? ‘info’ : ‘tip’}\>

{m.text}

\</Alert\>

{m.timestamp && (

\<Text variant=“microcopy”\>{m.timestamp}\</Text\>

)}

\</Flex\>

))}

\</Box\>

);

I have added my code above. The height and overflow properties are not working. Please guide me. Thank you in advance.

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [March 24, 2026, 12:02pm UTC](https://community.hubspot.com/t/overflow-scroller-not-working/147606/2 "2026-03-24T12:02:11Z")

</div>

Hey @SagarTomar, I hope that you are well!  
Thanks for sharing the code and for reaching out to the HubSpot Community!  
I’d love to put you in touch with our Top Experts: Hi @Anton, [@Mike\_Eastwood](https://community.hubspot.com/t5/user/viewprofilepage/user-id/9259) and [@zach\_threadint](https://community.hubspot.com/t5/user/viewprofilepage/user-id/324811) do you have any insighs to share with @SagarTomar, please?  
In the meantime @SagarTomar, you might want to take a look at these resources:  
- [Box](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/box)  
- [Manage UI extension layout](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/manage-ui-extension-layout)  
- [UI extension components](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview)  
Have a lovely day and thanks so much! 🌟  
Bérangère

---

<div class="post-metadata">

**Author:** ![zach\_threadint](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/zach_threadint/32/46318_2.png) [@zach\_threadint](https://community.hubspot.com/u/zach_threadint)\
**Post date:** [March 25, 2026, 12:24am UTC](https://community.hubspot.com/t/overflow-scroller-not-working/147606/3 "2026-03-25T00:24:43Z")

</div>

Hi @SagarTomar 👋

Looks like the only properties available for the [HubSpot UI Extensions Box component](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/box) are **alignSelf** and **flex**. As such, I _ **think** _ the documentation may need an update ([@BérangèreL](https://community.hubspot.com/t5/user/viewprofilepage/user-id/230185) 👋). Specifically, the explanation of the **flex** property, which currently includes references to **height** and **width** properties, which do not seem to be supported in this case.

@SagarTomar I think your best option at the moment is to regulate the number of list items displayed, potentially using a [ButtonRow](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/button-row) to deliver a pagination-like or view more/less kind of experience.

You might also find the [**AutoGrid** component](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/autogrid) helpful here.

I hope this proves helpful. Please let me know if you have any follow-up questions.

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [March 25, 2026, 5:15pm UTC](https://community.hubspot.com/t/overflow-scroller-not-working/147606/4 "2026-03-25T17:15:11Z")

</div>

Hey [@zach\_threadint](https://community.hubspot.com/t5/user/viewprofilepage/user-id/324811), and thanks for the tag!  
You’re right, the current Box component only supports the alignSelf and flex props, and there’s no overflow, height, or width options available.  
Great catch on the documentation, I’ll share this internally!

For your use case @SagarTomar, managing the number of visible list items and incorporating a ButtonRow for “view more/less” (as [@zach\_threadint](https://community.hubspot.com/t5/user/viewprofilepage/user-id/324811) suggested, thank you) is a solid approach.  
The AutoGrid component is also a good option for flexible layouts.

Thanks for your helpful feedback [@zach\_threadint](https://community.hubspot.com/t5/user/viewprofilepage/user-id/324811)! 🧡  
Bérangère

---

<div class="post-metadata">

**Author:** ![SanjayKumar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sanjaykumar/32/16943_2.png) [@SanjayKumar](https://community.hubspot.com/u/SanjayKumar)\
**Post date:** [March 25, 2026, 9:46am UTC](https://community.hubspot.com/t/overflow-scroller-not-working/147606/5 "2026-03-25T09:46:50Z")

</div>

Hi @SagarTomar,  
In a standard React app, using style={{…}} works fine. However, HubSpot UI Extensions use a CSS-in-JS system under the hood, which means the style prop is either ignored or behaves unreliably, so properties like height and overflow don’t take effect as expected.

You can use the css prop instead:

Replace style={{…}} with css={{…}} on your Box component: const DataList = ({ list }) =\> (  
\<Box  
css={{  
height: ‘300px’,  
overflowY: ‘auto’,  
}}  
\>  
{(list || []).map((m, i) =\> (  
\<Flex  
key={i}  
direction=“column”  
align={m.from === ‘user’ ? ‘end’ : ‘start’}  
gap=“xs”  
\>  
\<Alert variant={m.from === ‘user’ ? ‘info’ : ‘tip’}\>  
{m.text}  
\</Alert\>  
{m.timestamp && (  
\<Text variant=“microcopy”\>{m.timestamp}\</Text\>  
)}  
\</Flex\>  
))}  
\</Box\>  
);  
Also noticed a couple of small things worth mentioning:

Component naming: your original used dataList (lowercase). React requires component names to start with a capital letter (DataList), otherwise it won’t render correctly.  
overflowY vs overflowL: using overflowY: ‘auto’ is more precise since you only need vertical scrolling. overflow: ‘auto’ would also enable horizontal scrolling unnecessarily.  
Hope this helps!  
(Taken help from ai)