flexibility - 如何在不落后于浏览器窗口的情况下使带边距的 div block 灵活

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 width - Margin

同时删除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>