html - margin+height makes the child to overflow even with box-sizing:border-box -

html

<div class="container-fluid">     <div id="main" class="row">         <div id="header_wrapper" class="col-xs-10 col-xs-offset-2">               <div id="header" class="mcard">header</div>         </div>     </div> </div> 

css

body, html {   width: 100%;   height: 100%;   background: #eeeded; }  .container-fluid {   min-height: 100%;   height: 1px; }  .row {   margin: 0px; }  .row [class*="col-"] {   padding: 0; }  #main {   margin: 4rem;   min-height: 100%;   height: 1px; }  #header_wrapper {   height: 20%; }  #header {   height: 100%; }  .mcard {   background: #fff;   display: block;   margin: 1rem;   transition: 0.2s ease-in-out; } 

http://codepen.io/anon/pen/jwgapz?editors=110

in above code, #header seems overflow out of #header_wrapper because of #header{height:100%;} , .mcard{margin:1rem;} adds more height of #header_wrapperand though box-sizing:border-box has been applied, still overflowing.

how avoid overflow without removing margin or using hardcoded height in px?

change header height 100% height: auto:

#header {     height: auto; }