<div class="container">
  <div class="parent">
    <p>I'm the parent element. I have a computed width of 700px.</p>
    <p>My font size is not set, which means that I will inherit the font size of my ancestor. The font size set on my children will be relative to the computed value I inherit (18px as set on my container).</p>
    <div class="child">
      <p>I'm the child element. My width will always be half of that of my parent.</p>
      <p>My font size is 100% that of my parent, which computes to 100% of 18px = 18px.</p>
      <div class="grandchild">
        <p>I'm the grandchild. My font size is set to 75% of that of my parent's. Which means that my font size is 75% of 18px = 13.5px.</p>
        <p>
          My width is set to 75% of that of my parent's computed width.
        </p>
      </div>
    </div>
  </div>
</div>
* {
  box-sizing: border-box;
}

body {
  background-color: #F5F5F5;
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 100%;
  max-width: 700px;
  font-size: 18px;
}

.parent {
  width: 100%;
  padding: 1em;
  background-color: #0099cc;
  color: white;
}

.child {
  background-color: white;
  padding: 1em;
  color: #333;
  width: 50%;
}

.grandchild {
  width: 75%;
  font-size: 75%;
  padding: .5em;
  background-color: #eee;
}