React - Stacking flex items on an overflow div in iOS Safari - css

Question

I am having a problem with stacking some cards on the mobile version of an application I'm developing that is using a react conversation component. On the desktop version and in inspect mode, the cards stack perfectly with a 15px space between them but when I fire it up on iPhone, I get the result you can see in the 3rd picture. I cannot find where this bug comes from and any help or similar issues stories are very welcome.
<Box
display="flex"
flexDirection="column"
style={{
overflowY: 'auto',
WebkitOverflowScrolling: 'touch',
}}
onScroll={handleScroll}
{...conversationProps}
>
{messages.map((item, index) => (
<Box
ref={ref}
display="flex"
flexDirection="row"
justifyContent={
item.user.username === username ? 'flex-end' : 'flex-start'
}
marginBottom={Spaces.component}
>
<ApplicationMessage
key={index}
isFromMe={item.user.username === username ? true : false}
profilePicture={item.user.profile_picture}
username={item.user.username}
timestamp={item.timestamp}
message={item.data.message}
timestampLanguage={timestampLanguage}
containerProps={{ flexShrink: 0 }}
/>
</Box>
))}
</Box>
On desktop:
On responsive console (chrome):
On Safari:
Thank you,
Max

Answer 1

To fix it, I just removed flex property to the scrollable (overflow) div.
It renders something like that in my code :
<Box
overflowY="auto"
onScroll={handleScroll}
{...conversationProps}
>
{messages.map((item, index) => (
<Box
ref={ref}
display="flex"
flexDirection="row"
justifyContent={
item.user.username === username ? 'flex-end' : 'flex-start'
}
marginBottom={Spaces.component}
>
<ApplicationMessage
key={index}
isFromMe={item.user.username === username ? true : false}
profilePicture={item.user.profile_picture}
username={item.user.username}
timestamp={item.timestamp}
message={item.data.message}
timestampLanguage={timestampLanguage}
containerProps={{ flexShrink: 0 }}
/>
</Box>
))}
</Box>