How to make a div stick to bottom of Drawer with same width of the Drawer React Material UI?

Question

I make a Drawer at right hand side using , I want 1

is stick to the bottom of the ,at the same time , the width of the

will same with the .

Desired outcome:

This is what I tried to achieve the outcome above:

 const useStyles = makeStyles({
  list: { // <-- this set the width of Drawer
    width: 500,
  },
  bottomContainer: {
    position: "fixed",
    bottom: 0,
    display: 'flex',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    margin: '30px'
 },
});

But when I set the position:fixed ,the bottom div become like this:

As you can see, the whole div is gel together, and not match the width of drawer. But if set position: relative ,the bottomContainer appear same width div in top and display below it, but not bottom of the .

If I set width: '100%' to bottomContainer, the Abc appear outside of the

Therefore my question is:

How to make a

with same width with and appear at the bottom of the ?

user_3490010 · Answer

Use flexbox in this case.

You should set a container which contains a height and both child elements. By adding display: flex, flex-direction: column and justify-content: space-between.

In the second div which contains two paragraph elements, you add another display: flex and justify-content: space-between. You don't need to add flex-direction here since the default is flex-direction: row. You can also add align-items: center here to vertically center align the content.

* {
  margin: 0;
  padding: 0;
}

.flex {
  width: 100%;
  height: 500px;
  background-color: grey;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.div1, .div2 {
  width: 100%;
  height: 100px;
  background-color: red;
}

.div2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

How to make a div stick to bottom of Drawer with same width of the Drawer React Material UI?

1 Answers