Why does my Material UI Divider not show up in a Material UI Container or Paper?

Question

Good morning,

I am in love with Material UI, there is so much one can do. However, after using it extensively, I have noticed that a Material UI Divider does not show up when it is the child of a Container or Paper component. I can't find anything as to why this is the case, so it is probably my implementation. Could someone check it out and see why it isn't appearing?

Everything is imported, the Popover works fine.

Thank you!

navBarPopover: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
}

<Popover 
    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: "top",
        horizontal: "right",
    }}
    transformOrigin={{
        vertical: "top",
        horizontal: "right",
    }}
>
  <Container className={clsx(classes.navBarPopover)}>
      <Button className={clsx(classes.loginButton)} component={Link} to="/user_auth" onClick={() => handleClose()}>
          Login
      </Button>
      <Divider />
      <Button className={clsx(classes.loginButton)} component={Link} to="/faqs" onClick={() => handleClose()}>
          FAQs
      </Button>
  </Container>
</Popover>

Dukas

Answer 1

I agree, Material-UI is really awesome.
In this issue, you're giving display:'flex' to the parent container. By giving flex, the child elements take the minimum possible width as flex-shrink is there on child elements by default.
So, here the Divider is there but its width is 0. Provide width to 100%.

<Divider style={{width:'100%'}} />

Check the demo here:- https://codesandbox.io/s/happy-euler-2ycv4

Edit: Feb 2023

as @Lesik2008 has mentioned in comment, you can use flexItem prop as well to indicate that this is flex item and it'll calculate the height accordingly. Pass flexItem as true.
much smaller and cleaner.

<Divider flexItem />

Shingly

Maybe it didn't exist when this was posted, but I think nowadays it's cleaner to use the flexItem prop of Divider, which achieves the same thing without manual style overwrites. – Vestal

yes @Lesik2008, we can use that. But that prop works only for vertical dividers. You can here – Shingly

@Shingly Docs said that is for vertical, but it works for horizontal dividers too – Fulfill

Does not work for me. – Fraser