设置：
我有一个具有一些属性的div,包括width,max-width和Box-shadow.

#mydiv {  
       width:100%;
       max-width:1200px;
       -webkit-Box-shadow: 0px 0px 20px rgba(0,1);
       -moz-Box-shadow: 0px 0px 20px rgba(0,1);
       Box-shadow: 0px 0px 20px rgba(0,1);
}

问题：
“Box-shadow”属性将div元素的宽度增加40px – 每侧20px.当屏幕足够小以至于内容应该达到100％宽度属性时,我们会看到一个水平滚动条.在通过CSS挖掘之后我发现这是因为div在技术上更像宽度：100％40px;

我试过的：
我考虑过设置overflow：隐藏在父div上,但我确实有一个min-width设置,然后使内容无法访问.我也尝试在Box-shadow CSS中使用百分比作为大小参数 – 例如1％ – 然后将div的宽度设置为98％ – 但是Box-shadow CSS似乎不接受其百分比尺寸.我也考虑使用javascript来测试浏览器宽度,然后相应地显示或隐藏Box-shadow元素,但它似乎不是最佳解决方案.

必须有一种更简单的方法来处理这个问题.思考？