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 class="modal">
<div class="child"></div>
</div>Padding should be present no matter the value of the height of the content.
>Solution :
* {
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 class="modal">
<div class="child"></div>
</div>Try this