Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />.
Desired Outcome:
https://i.sstatic.net/Uxrjk.png
To achieve the desired outcome, here is what I attempted:
const useStyles = makeStyles({
list: {
width: 500,
},
bottomContainer: {
position: "fixed",
bottom: 0,
display: 'flex',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
margin: '30px'
},
});
However, setting position: fixed results in the bottom div looking like this:
https://i.sstatic.net/shL6q.png
The entire div becomes merged and does not match the width of the drawer. Alternatively, if I set position: relative, the bottomContainer appears with the same width as the top div and displays below it rather than at the bottom of the <Drawer />.
Setting width: '100%' for bottomContainer causes Abc to appear outside of the <Drawer />.
My question is:
How can I create a <div> with the same width as <Drawer/> and have it appear at the bottom of the <Drawer />?