title: Get child element to respect parent element Width & Height
body: <p>I was working on a wepage earlier this week where the 'banner-image' was being cut off the view-port of the screen depending on the browser and size of screen. </p>
  
  <p>I thought that by simply converting the Parent Container to 'Height: 100vh' this would make all child elements fit within the parent container that is now set to fit the height of any viewport.</p>
  
  <p>This did not work as I intended it to.
  The banner image was still being cutoff even though the parent container was set to 100vh. </p>
  
  <p>Is there a way to do this?</p>
  
  <p><a href="https://jsfiddle.net/kL3zhtn6k" rel="nofollow">JSFiddle Link</a></p>
  
  <h2>CSS</h2>
  
  <pre><code>.parent {
      width: 100%;
      background-color: blue;
     border: 1px dashed blue;
      text-align: center;
  }
  
  .child-header {
      background-color: rgba(122, 234, 221, .4);
      width: 100%;
      background-color: gray;
      position: relative;
  }
  
  p {
      color: white;
      font-family: sans-serif;
      text-align: center;
  }
  
  h1 {
      color: white;
      text-align: center;
      font-family: sans-serif;
  }
  
  .banner-image {
      background-color: black;
      width: 80%;
      min-height: 500px;
      position: relative;
      margin: 0 auto;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="parent"&gt;&lt;!-- Wrapper Parent Container --&gt;
  
      &lt;div class="child-header"&gt;
          &lt;p&gt;Cool header with a nav will go here&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;h1&gt;Some Headline Tag Here&lt;/h1&gt;
  
      &lt;div class="banner-image"&gt;
      &lt;/div&gt;
  
      &lt;h2&gt;Blah Blah Blah...&lt;/h2&gt;
  
  
  &lt;/div&gt;&lt;!-- End Wrapper --&gt;
  </code></pre>