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

  For a couple of use cases and examples for calc() go to:

  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