如何適應內DIV外DIV中

Question

HTML：

<div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> 
    <section class="notif notif-warn"> 
     <h6 class="notif-title">Warning!</h6> 
     <p>This task was forced checked out by another user. Your changes will not be saved Site.Master.</p> 
     <div class="notif-controls"> 
      <a href="#" class="notif-close" id="cBtn">Close</a> 
     </div> 
    </section> 
</div> 

的jsfiddle：http://jsfiddle.net/sikni8/kb2r6d4c/1/

我如何更新我的CSS，以確保與框的陰影外DIV內內DIV適合。

Answer 1

您可以將box-sizing: border-box;添加到.notif類中或刪除100％寬度。

問題是，當您將100％寬度+填充添加到元素時，會導致溢出。

Answer 2

從.notif刪除寬度：

.notif { 
    width: 100%; 
}