Flexbox, show elipses instead of wrapping when screen shrinks (tsx)

Hello, I've been racking my brain figuring out why this code works on codepen but not on my own code. My code:
<Card
key={index}
sx={{
display: 'flex',
alignItems: 'center',
p: 1
}}
>
<Box
sx={{
flex: 1,
h4: {
// whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}}
>
{contentToReactComponent(
section.content,
dependencies,
links,
customComponents
)}
</Box>
<Box
sx={{
a: {
width: '180px'
}
}}
>
{section.ctas ? (
<SectionCTAContainer
ctas={section.ctas}
ctaAlign="End"
/>
) : null} // This is just a button pulled from contentful.
</Box>
</Card>
<Card
key={index}
sx={{
display: 'flex',
alignItems: 'center',
p: 1
}}
>
<Box
sx={{
flex: 1,
h4: {
// whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}}
>
{contentToReactComponent(
section.content,
dependencies,
links,
customComponents
)}
</Box>
<Box
sx={{
a: {
width: '180px'
}
}}
>
{section.ctas ? (
<SectionCTAContainer
ctas={section.ctas}
ctaAlign="End"
/>
) : null} // This is just a button pulled from contentful.
</Box>
</Card>
The codepen I'm looking at literally shows the same code here: https://codepen.io/psyrendust/pen/ZWPxmM/ Any help would be appreciated.
No description
5 Replies
TRUEfoe
TRUEfoe8mo ago
When I add the whiteSpace option back in, it shows this and doesn't shrink at all just kind of sticks to the View Disclosure button:
No description
TRUEfoe
TRUEfoe8mo ago
Playing with the flex property flex: '0 0 200px' on the first Box made it do this... We're almost there. Now to figure out why the screen doesn't shrink any smaller than it does as you see the End aligned View Disclosure button is going off the page.
No description
TRUEfoe
TRUEfoe8mo ago
The issue appears to be because everything is wrapped inside a grid with gridTemplateColumns: 360px 1fr... As soon as I unwrap it from that, it works fine...
TRUEfoe
TRUEfoe8mo ago
We did it gang!
No description
TRUEfoe
TRUEfoe8mo ago
A minHeight was needed on one of the parents.
Want results from more Discord servers?
Add your server