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.
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 and @zach_threadint 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
- Manage UI extension layout
- UI extension components
Have a lovely day and thanks so much! 
Bérangère
Hi @SagarTomar 
Looks like the only properties available for the HubSpot UI Extensions Box component are alignSelf and flex. As such, I think the documentation may need an update (@BérangèreL ). 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 to deliver a pagination-like or view more/less kind of experience.
You might also find the AutoGrid component helpful here.
I hope this proves helpful. Please let me know if you have any follow-up questions.
Hey @zach_threadint, 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 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! 
Bérangère
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)