How to make a div block with margins be flexible without going behind browser window

Question

I'm trying to make the following div flexible

div {
min-width: 500px;
max-width: 1000px;
width:100%;
height: 400px;
margin-left:100px
}

If I remove the margin left everything works fine, but with the margin, when I start resizing the browser window, the box goes behind the browser window and only then starts being resized. How do I solve this issue? I tried a wrapper, tried resetting box-sizing, tried with different positionings but nothing seems to work, what am I missing?

Answer 1

Try adding width: calc(100vw-100px); or calc(100% - 100px). This sets the width of the div to Veiwport width - Margin

Also remove max-width: 1000px; and min-width: 500px;

div {
 width: calc(100%-100px);
 height: 400px;
 margin-left:100px
}

div {
     width: calc(100%-100px); /*or `width: calc(100vw-100px);`*/
     height: 400px;
     margin-left:100px;
     background-color:pink;
    }

<div></div>