为什么 flex 属性在反应样式的组件中不起作用？

Question

Okay so my code isn't complex at all. I am watching a tutorial on react styled components and my code got to this point:

const Container = styled.div
    `height: 60px;
`

const Wrapper = styled.div`
    padding : 10px 20px;
    display : flex;
    justify-content : space-between;

`

const Left = styled.div`
    flex : 1;
`
const Center = styled.div`
    flex: 1;
`
const Right = styled.div`
    flex : 1;
`

This is the rest of the code:

const Navbar = () => {
    return (
        <Container>
            <Wrapper>
                <Left>loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</Left>
                <Center>Center</Center>
                <Right>Right</Right>
            </Wrapper>
        </Container>
    )
}

export default Navbar

So what is basically happening is that i created 3 components on the same line named Left, Center and Right components and i put them inside a Wrapper component. What the flex attribute is meant to do is to give Left, Center and Right components equal space on the browser. Meaning that if there is some long string inside Left (as seen above), the Center and Right components maintain their positions and are not pushed to the side to accommodate Left. Its meant to be working but when i open my browser, this is what i see:

loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmCenterRight

meaning that the flex attribute is obviously not working? so anyone knows what i am doing wrong? and btw, the tutorial i am watching just came out in September 2021 so i doubt its because there's a change in the syntax or something, but if it is the case then please point it out.

Answer 1

That is because flex attempts to size according to your proportions by organizing around element boundaries - or words in case of text.

But it is not an absolute rule. Since you're having a gigantic word that cannot be wrapped flex does the best it can do under this condition. Similar to how you would usually not want to break up or hide parts of a large button to respect proportions at all costs. This is called overflow.

Your CSS should work if you have different paragraph sizes with normal words.

One option is to hide overflow or show a scroll bar:

const Left = styled.div`
    flex : 1;
    overflow: hidden; # also scroll
`

Alternatively you can permit wrapping on letter boundary - breaking up long words will also make flex proportions achievable:

const Left = styled.div`
    flex : 1;
    overflow-wrap: anywhere;
`