Grid flex end not acting the way I expected

user_7055769 0
Viewed 109

I am trying to put two buttons under each other on the right. Here's my code:

export const WalletsContainer = () => {
  return (
    <Grid style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'}>
      <Grid xs={2}>
        <CustomButton buttonText={t('add')} onClick={() => console.log('Add')} />
      </Grid>
      <Grid xs={2}>
        <CustomButton buttonText={t('download')} onClick={() => console.log('Download')} />
      </Grid>
    </Grid>
  );
};

And here's what it looks like:

enter image description here

My question is, why is it now to the right? Based on the docs alignItems={'flex-end'} should do the trick. Or am I misunderstanding it?

material-ui reactjs css javascript
1 Answers
 <Grid container style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'}>

Should do the trick.

from the docs - container - If true, the component will have the flex container behavior. You should be wrapping items with a container.

user_75541040
Related