title: Force elements to always be inside a DIV
body: <p>One thing I always seem to fight within web development is keeping things inside a div element. I often run into issues where I have a list of div wrappers with more divs and content within, and eventually, one of them bleeds out and causes a nightmare when it comes to styling. An example if I may. </p>
  
  <p>If you inspect the element you'll notice the <code>banner-content</code> div doesn't wrap all of the content. The images and span elements are outside of it's reach, even so the <code>icon-wrapper</code> content does (once again) wrap around everything. I believe I know that the answer to that one (the img height is set to 100%). </p>
  
  <p>It doesn't seem that big of a problem now, but when trying to align things with much more content and forms and responsive design, it gets kinda crazy. It almost feels like I'm adding some hacky code to make it all form nicely. Realistically it seems like everything stayed within my parent div sizes and elements, everything would behave as expected. </p>
  
  <p>Is there a way to force <code>divs</code> to contain all the child node's within its reach? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width:100%;
    display:flex;
    flex-direction:column;
  }
  .cool-banner {
    display:flex;
    height:60vh;
  }
  .banner-picture {
    width:50%;
  }
  .banner-picture img {
    object-fit: none;
    object-position: center;
    height: 100%;
    width: 100%;
  }
  .banner-content {
    display:flex;
    flex-direction: column;
    height:100%;
  }
  .icon-list {
   display:flex;
  }
  .icon-wrapper {
  display:flex;
  flex-direction:column;
  height:40vh;
  }
  .icon-wrapper img {
    object-fit: contain;
    object-position:center;
    width:100%;
    height:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="cool-banner"&gt;
       &lt;div class="banner-picture"&gt;
        &lt;img src="https://cdn.shopify.com/s/files/1/1150/2512/files/WG_Grill_ShootBeside_Oct2017-7_dd4f32ad-38ac-4a49-8a3c-332ba067835e_810x540.jpg?v=1553613536"/&gt;
       &lt;/div&gt;
       &lt;div class="banner-content"&gt;
        &lt;h1&gt;I'm Content&lt;/h1&gt;
        &lt;div class="icon-list"&gt;
          &lt;div class="icon-wrapper"&gt;
            &lt;img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/fire-silver.png?51152"/&gt;
            &lt;span&gt;Nice Fire&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="icon-wrapper"&gt;
            &lt;img src="https://cdn.shopify.com/s/files/1/1150/2512/files/EPDA-Logo-small_x100-ConvertImage_small.png?v=1559164248"/&gt;
            &lt;span&gt;Nice Award&lt;/span&gt;
          &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>