css calc от чего берется 100%

.container { 
  width: 100px; 
  display: inline-block; 
  vertical-align: top; 
} 
 
.container-setheight { 
  height: 200px; 
} 
 
.container-noheight { 
  height: auto; 
} 
 
.container-abs { 
  position: relative; 
} 
 
.container-abs-abs { 
   
} 
 
.first { 
  height: 10px; 
  background-color: aliceblue; 
} 
 
.second { 
  height: calc(100% - 10px); 
  background-color: yellow; 
} 
 
.container-abs .second, 
.container-abs-abs .second { 
  position: absolute; 
}

<div class="container container-setheight"> 
  Высота задана = 200 пикселей 
  <div class="first"></div> 
  <div class="second">calc(100% - 10px)</div> 
</div> 
 
<div class="container container-noheight"> 
  Высота не задана<br> 
  position: static; + position: static; 
  <div class="first"></div> 
  <div class="second">calc(100% - 10px)</div> 
</div> 
 
<div class="container container-abs"> 
  Высота не задана<br> 
  position: relative; + position: absolute; 
  <div class="first"></div> 
  <div class="second">calc(100% - 10px)</div> 
</div> 
 
<div class="container container-abs-abs"> 
  Высота не задана<br> 
  position: static; + position: absolute; 
  <div class="first"></div> 
  <div class="second">calc(100% - 10px)</div> 
</div>