Check out example codes for "css calc". It will help you in understanding the concepts better.

Code Example 1

div {
	width: calc(100% - 100px);
}

Code Example 2

body {
  width: calc(100vw - 8px);
  height: calc(100vh - 8px);
}

Code Example 3

/* Answer to: "css calc height" */

/*
  Assuming you're not sure what the calc() function does:
  calc() is a native CSS way to do simple math right in CSS as a
  replacement for any length value (or pretty much any number
  value). It has four simple math operators: add (+), subtract (-),
  multiply (*), and divide (/). Being able to do math in code is
  nice and a welcome addition to a language that is fairly number
  heavy.

  For a couple of use cases and examples for calc() go to:
  https://css-tricks.com/a-couple-of-use-cases-for-calc/

  Here's a list of all the cases:
  Case 1: (All The Height – Header)
  Case 2: X Pixels From Bottom Right Corner
  Case 3: Fixed Gutters Without Parents
  Case 4: Showing Math Is Easier To Understand
  Case 5. Kinda Crappy box-sizing Replacement
*/

Learn ReactJs, React Native from akashmittal.com