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.

5 Replies

TRUEfoe•4mo 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:

TRUEfoe•4mo 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.

TRUEfoe•4mo 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•4mo ago

We did it gang!

TRUEfoe•4mo ago

A minHeight was needed on one of the parents.

Gaming

Programming

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