title: CSS: height / overflow-y:hidden not having effect on div size
body: <p>I have the following div with these two identifiers: </p>
  
  <pre><code>.locations_wrapper
  </code></pre>
  
  <p>and </p>
  
  <pre><code>#tenn_location_wrapper
  </code></pre>
  
  <p>the <code>height</code> of the latter is set to <code>600px</code> and the height of the former is set to <code>500px</code>. I have set <code>overflow-y:hidden</code> to each <code>div</code> identifier and yet, when the div is rendered in Chrome, the height is <code>2215px</code>. Is there any way to keep it from expanding to this height and adhere to the asigned <code>height</code> values? </p>
  
  <p>Here is a fiddle with the HTML and CSS: </p>
  
  <p><a href="https://jsfiddle.net/ft74v68f/2/" rel="nofollow">https://jsfiddle.net/ft74v68f/2/</a></p>
  
  <p>N.B. the fiddle does not totally illustrate the problem as the Bg image, which is of a size 2048px * 1365px, is not rendering. </p>
  
  <p>my <code>&lt;body&gt;</code> tag ends in the middle of its child, <code>locations_wrapper</code>. However when I increase the <code>height</code> of the body element such that it doesn't overflow, the heights of its children are still not enforced.</p>