为什么会发生这种情况？HTML窗口宽度

我正在试验html标记和不同的布局。我遇到了这个JSFiddle：我使用它，并对它进行了一些调整。有一件事我不明白，为什么当你把窗户的宽度变小的时候，绿色的盒子就消失了

绿色框的代码如下所示：

.percent {
    width:calc((100% - 400px)/1);
    background: lightgreen;
    border:1px solid grey;
}

---

谢谢

由于窗口宽度小于

400px

，因此

百分比消失。宽度是通过窗口的全部实际宽度减去定义的
400px
来计算的，因此显示
.percent
的最小空间是
401px

.percent
显示
400px
上的宽度。如果您的窗口宽度为
410px
，
.percent
的宽度为
10px
是否有办法阻止这种情况发生？我试图实现一个完整的页面三栏布局，第一栏和第三栏固定，中间栏根据屏幕大小调整宽度（与示例中非常相似）。