flexibility - 如何使具有边距的 div 块灵活而不落后于浏览器窗口

Question

我正在尝试使以下 div 灵活

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

如果我删除边距，一切正常，但是使用边距，当我开始调整浏览器窗口的大小时，该框位于浏览器窗口的后面，然后才开始调整大小。我该如何解决这个问题？我尝试了一个包装器，尝试重置盒子大小，尝试了不同的定位，但似乎没有任何效果，我错过了什么？

Answer 1

尝试添加width: calc(100vw-100px);或calc(100% - 100px)。这会将 div 的宽度设置为Veiwport 宽度 - 边距

同时删除max-width: 1000px;和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>