padding right and bottom gone on fixed element-CodePudding

I have a div .modal that has a fixed position with padding: 90px;. There is a div .child inside it with height: 1500px;.

The problem is that the padding right and bottom gone on modal, I have tried to set box-sizing: border-box; but it cannot solve the problem.

If you inspect it, there are negative value applied on position, I don't know why.

.modal {
  background-color: gray;
  height: 100vh;
  padding: 90px;
  position: fixed;
  width: 100vw;
}

.child {
  background-color: orange;
  height: 1500px;
  width: 100%;
}

<div >
  <div ></div>
</div>

Padding should be present no matter the value of the height of the content.

CodePudding user response：

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.modal {
  background-color: gray;
  height: 100%;
  padding: 90px;
  position: fixed;
  width: 100vw;
  overflow: auto;
}

.child {
  background-color: orange;
  height: 1500px;
  width: 100%;
}

<div >
  <div ></div>
</div>

Try this

CodePudding user response：

this will work for you, so basically the padding top and bottom didn't show because the child div was taking the whole height of the page but if you set the height to be for example 800px then it will work.

.modal {
  background-color: gray;
  height: 100vh;
  position: fixed;
  width: 100vw;
  display:flex;
  justify-content: center;
  align-items:center;
}

.child {
  background-color: orange;
  height: 800px;
  width: 100%;
  margin: 90px;
}

<div >
  <div ></div>
</div>