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

TRUEfoeOP•9mo 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:

TRUEfoeOP•9mo 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.

TRUEfoeOP•9mo 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...

TRUEfoeOP•9mo ago

We did it gang!

TRUEfoeOP•9mo ago

A minHeight was needed on one of the parents.

Gaming

Programming

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