title: Flex grid <img> and background-image side by side responsiveness/scaling issue
body: <p>Here's my issue: 
  I am trying to create a side-by-side ad where the left side is just an image, and the right side is a background image with an image, text, and 5 responsive flexgrid buttons nested on top of it.</p>
  
  <p>I figured out how to get everything layered on top of the background image, but right now I cannot for the life of me figure out how to get the background image container to scale with the image to its left. I have been tweaking percentages and margins for hours now trying to figure it out. </p>
  
  <p>I managed to get it extremely close on a certain screen size (2560x1440) but as the window is resized the background image container ends up resizing differently than the image. One solution I thought of is just creating like 10 media query breakpoints where I tweak the margins and paddings to make the images the same size, but honestly, I'd rather find a more efficient and cleaner way to do it.</p>
  
  <p>Please don't judge my code, it's incredibly messy I know! I am still learning.</p>
  
  <p><a href="https://jsfiddle.net/y8nz39gL/3/" rel="nofollow noreferrer">https://jsfiddle.net/y8nz39gL/3/</a></p>
  
  <p><a href="https://i.stack.imgur.com/RuA9s.jpg" rel="nofollow noreferrer">DESIRED RESULT</a></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>.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
    background-image: url('https://cdn.shopify.com/s/files/1/1017/0995/files/Luckyleo-Custom-Print-Floral-Background.jpg?13173226259512623367');
    background-position: 50 50;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 50px 0px 50px 0px;
  }
  
  .flex-container2 {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
    margin-bottom: -100px;
  }
  
  
  /* NEW */
  
  .flexbottommargin {
    margin-bottom: -50px;
  }
  
  .less-space-bottom {
    margin-bottom: -20px !important;
  }
  
  
  /*NEW OVER*/
  
  .flex-container20 {
    padding-top: 35px;
    padding-bottom: 35px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
    margin-bottom: -75px;
  }
  
  .flex-container21 {
    padding-top: 35px;
    padding-bottom: 35px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
    margin-bottom: -75px;
  }
  
  .flex-container22 {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
    margin-bottom: -100px;
    margin-top: -2px;
  }
  
  .flex-container23 {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
    margin-bottom: -100px;
    margin-top: -2px;
  }
  
  .flex-container-content2 img {
    padding-bottom: 15px;
  }
  
  .luckyleospacer {
    padding-bottom: 20px;
  }
  
  .extrabottompadding {
    padding-bottom: 12px;
  }
  
  .extrabottompadding2 {
    padding-bottom: 20px;
  }
  
  
  /* NEW */
  
  .flex-container-content-newyears {
    padding-top: 20px;
    width: 71%;
    /*NEW LINE*/
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-bottom: 20px;
    text-align: center;
  }
  
  .flex-container-content-newyears-banner {
    padding-top: 20px;
    width: 64%;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-bottom: 20px;
    text-align: center;
  }
  
  
  /*NEW OVER*/
  
  .flex-container-content {
    padding-top: 35px;
    width: 60%;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-bottom: 10px;
  }
  
  .flex-container-content2 {
    padding-top: 35px;
    width: 75%;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-bottom: 35px;
    text-align: center;
  }
  
  .flex-container-content22 {
    padding-top: 35px;
    width: 100%;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
  
  .flex-container-content23 {
    width: 100%;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
  
  .flex-container-content23 {
    padding-top: 35px;
    width: 100%;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
  
  .flex-container-content24 {
    width: 100%;
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-bottom: 55px;
    text-align: center;
  }
  
  .flex-container-content h1 {
    font-family: "Asap", sans-serif;
    font-size: 2.4vw;
    color: #292929 !important;
    text-transform: none !important;
    font-weight: 600;
    line-height: 1.3em;
    letter-spacing: 0px;
    padding: 4%;
  }
  
  .flexgrid-cell {
    margin-bottom: 0px;
  }
  
  .flex-container-content h2 {
    font-family: "Lavanderia", sans-serif !important;
    font-size: 4vw;
    color: #292929 !important;
    text-transform: none !important;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 35px;
    letter-spacing: 0px;
  }
  
  .flex-container-content2 h1 {
    font-family: "Lavanderia", serif !important;
    font-size: 50px;
    font-size: 3.5vw;
    color: #292929 !important;
    text-transform: none !important;
    font-weight: 500;
    line-height: 1.3em;
    letter-spacing: 0px;
  }
  
  .flex-container-content2 p {
    padding-top: 20px;
    color: #292929 !important;
    text-transform: none !important;
    padding-bottom: 20px;
  }
  
  .flex-container {
    max-width: 100%;
    margin: auto;
    //border: 1px solid red;
  }
  
  
  /*Basic flexgrid Styles*/
  
  .flexgrid {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
  }
  
  .u-textCenter {
    text-align: center;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
  
  .flexgrid-cell {
    width: 100%;
    flex: 1;
  }
  
  .flexgrid-cell img {
    width: 100%;
  }
  
  
  /* Justify per row*/
  
  .flexgrid--right {
    justify-content: flex-end;
  }
  
  .flexgrid--center {
    justify-content: center;
  }
  
  
  /* Alignment per row */
  
  .flexgrid--top {
    align-items: flex-start;
  }
  
  .flexgrid--bottom {
    align-items: flex-end;
  }
  
  .flexgrid--center {
    align-items: center;
  }
  
  
  /* Alignment per cell */
  
  .flexgrid-cell--top {
    align-self: flex-start;
  }
  
  .flexgrid-cell--bottom {
    align-self: flex-end;
  }
  
  .flexgrid-cell--center {
    align-self: center;
  }
  
  
  /*===========================================*/
  
  
  /* Base classes for all media - Mobile first */
  
  .flexgrid--cols-2 &gt; .flexgrid-cell {
    flex: 0 0 100%;
  }
  
  .flexgrid--cols-3 &gt; .flexgrid-cell {
    flex: 0 0 100%;
  }
  
  .flexgrid--cols-4 &gt; .flexgrid-cell {
    flex: 0 0 100%;
  }
  
  .flexgrid--cols-6 &gt; .flexgrid-cell {
    flex: 0 0 calc(50% - #{$gutter});
  }
  
  .flexgrid--cols-12 &gt; .flexgrid-cell {
    flex: 0 0 calc(33.3333% - #{$gutter});
  }
  
  
  /* One of -- columns*/
  
  .flexgrid--1of2 &gt; .flexgrid-cell,
  .flexgrid--1of4 &gt; .flexgrid-cell:first-of-type,
  .flexgrid--1of3 &gt; .flexgrid-cell:first-of-type {
    flex: 0 0 100%;
  }
  
  .flexgrid--1of6 &gt; .flexgrid-cell:first-of-type {
    flex: 0 0 50%;
  }
  
  .flexgrid--fit &gt; .flexgrid-cell {
    flex: 1;
  }
  
  .flexgrid--full &gt; .flexgrid-cell {
    flex: 0 0 100%;
  }
  
  
  /* Tablet (medium) screens */
  
  @media (min-width: 30em) {
    .flexgrid--cols-4 &gt; .flexgrid-cell {
      flex: 0 0 calc(50% - #{$gutter});
    }
    .flexgrid--cols-6 &gt; .flexgrid-cell {
      flex: 0 0 calc(33.3333% - #{$gutter});
    }
    .flexgrid--cols-12 &gt; .flexgrid-cell {
      flex: 0 0 calc(16.6666% - #{$gutter});
    }
    .flexgrid--holly-grail {
      .aside {
        flex: 1 calc(25% - #{$gutter});
      }
    }
    .flexgrid--1of2 &gt; .flexgrid-cell {
      flex: 0 0 50%;
    }
    .flexgrid--1of6 &gt; .flexgrid-cell:first-of-type {
      flex: 0 0 30%;
    }
    .flexgrid--1of4 &gt; .flexgrid-cell:first-of-type {
      flex: 0 0 50%;
    }
    .flexgrid--1of3 &gt; .flexgrid-cell:first-of-type {
      flex: 0 0 100%;
    }
  }
  
  
  /* Large screens */
  
  @media (min-width: 48em) {
    .flexgrid--cols-2 &gt; .flexgrid-cell,
    .flexgrid--cols-3 &gt; .flexgrid-cell,
    .flexgrid--cols-4 &gt; .flexgrid-cell,
    .flexgrid--cols-6 &gt; .flexgrid-cell,
    .flexgrid--cols-12 &gt; .flexgrid-cell {
      flex: 1;
    }
    .flexgrid--1of2 &gt; .flexgrid-cell {
      flex: 0 0 50%;
    }
    .flexgrid--1of6 &gt; .flexgrid-cell:first-of-type {
      flex: 0 0 16.6666%;
    }
    .flexgrid--1of4 &gt; .flexgrid-cell:first-of-type {
      flex: 0 0 25%;
    }
    .flexgrid--1of3 &gt; .flexgrid-cell:first-of-type {
      flex: 0 0 30%;
    }
    .flexgrid--gutters.flexgrid--nested {
      .flexgrid-cell:first-of-type {
        .Demo {
          margin-right: 0;
        }
      }
    }
  }
  
  
  /* 2/3rds COLUMN SPLIT */
  
  
  /* NEW */
  
  .flexgrid--half-l {
    flex-basis: 49.1%;
    max-width: 49.1%;
    margin-right: .6%;
  }
  
  .flexgrid--half-r {
    flex-basis: 50%;
    max-width: 50%;
    margin-left: .4%;
  }
  
  .flexgrid--1of3 {
    flex-basis: 57.188%;
    max-width: 57.188;
  }
  
  .desktopshowtop {
    padding-top: 57px;
  }
  
  .desktopshowtopbanner {
    padding-top: 57px;
  }
  
  
  /* NEW */
  
  @media only screen and (min-width: 300px) and (max-width: 1024px) {
    .flex-container-content h2 {
      font-size: 12vw;
    }
    .flex-container-content h1 {
      font-size: 4.2vw;
    }
    .flex-container-content2 h1,
    h2 {
      font-size: 40px;
      font-size: 6.8vw;
    }
  }
  
  @media only screen and (min-width: 300px) and (max-width: 419px) {
    .flex-container-content2 h1,
    h2 {
      font-size: 40px;
      font-size: 8vw;
    }
  }
  
  @media only screen and (min-width: 300px) and (max-width: 1267px) {
    .whyispaddinghere {
      margin-bottom: -115px;
    }
    .flex-container-content {
      width: 90%;
    }
    .flex-container-content2 {
      width: 95%;
    }
  }
  
  @media only screen and (min-width: 1025px) {
    .flex-container21 {
      display: none;
    }
    .flex-container23 {
      display: none;
    }
  }
  
  @media only screen and (min-width: 300px) and (max-width: 1024px) {
    .flex-container20 {
      display: none;
    }
    .flex-container22 {
      display: none;
    }
  }
  
  
  /* NEW LINES - 2018 */
  
  
  /* With gutters*/
  
  $gutter: 1em;
  .flexgrid--gutters {
    margin-left: -$gutter;
    .flexgrid-cell {
      padding-left: $gutter;
    }
    .flexgrid--nested {
      .flexgrid-cell:first-of-type {
        margin-right: 1em;
      }
    }
  }
  
  
  }
  .flex-container-content-newyears {
    padding-top: 20px;
    width: 75%;
    /*NEW LINE*/
    
    align-items: center;
    align-self: center;
    justify-content: center;
    padding-bottom: 20px;
    text-align: center;
  }
  .flex-container-newyears {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 100%;
  }
  .content-1of5:hover {
    background-color: #a36871;
  }
  .content-1of5 {
    background-color: #8d5760;
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: "Asap", sans-serif;
    align-self: center;
    justify-content: center;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-left: 7px;
    margin-right: 7px;
    margin-bottom: 7px;
    color: #fff;
  }
  .content-1of5 a {
    color: #fff !important;
  }
  .express-promo-right-side {
    background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSizebg.jpg?4927879912789524270");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    margin: auto;
  }
  .express-promo-right-side img {
    padding-top: 5.4%;
    margin-top: 12px;
    max-width: 40% !important;
    margin-bottom: -5%;
  }
  .express-buttons-margin-top {
    padding: 14.0% 2% 4.0% 2%;
    margin-bottom: -9px;
  }
  .flexgrid--half-r {
    margin-bottom: 1%;
    margin-top: 1%;
  }
  .shopsizefrontpage {
    padding-top: 10%;
    margin-bottom: -10%;
    font-size: 5vw !important;
    line-height: 1.0em;
    font-family: 'Poppins';
    color: #fff !important;
    font-weight: 800;
  }
  .shopsizefrontpagered {
    color: #8d5760 !important;
  }
  .Grid--nested {
    .Grid-cell:first-of-type {
      .Demo {
        margin-right: 1em;
      }
    }
  }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>\
  &lt;div class="flex-container-newyears"&gt;
    &lt;div class="flex-container-content-newyears"&gt;
      &lt;div class="flexgrid flexgrid--gutters flexgrid--cols-3 u-textCenter"&gt;
        &lt;div class="flexgrid--half-l flexgrid-cell"&gt;
          &lt;a href="http://www.luckyleodancewear.com"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize.jpg?4927879912789524270" alt="Luckyleo How to Customize - Step 1" /&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="flexgrid--half-r flexgrid-cell express-promo-right-side"&gt;&lt;img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize2-logo.png?5263606338478632237" /&gt;
          &lt;div class="flexgrid-cell shopsizefrontpage"&gt;SHOP &lt;span class="shopsizefrontpagered"&gt; YOUR SIZE&lt;/span&gt;&lt;/div&gt;
  
          &lt;div class="flexgrid flexgrid--gutters flexgrid--cols-4 u-textCenter express-buttons-margin-top"&gt;
  
            &lt;div class="flexgrid-cell"&gt;
              &lt;a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos"&gt;
                &lt;div class="content-1of5"&gt;XXS&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="flexgrid-cell"&gt;
              &lt;a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos"&gt;
                &lt;div class="content-1of5"&gt;XXS&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="flexgrid-cell"&gt;
              &lt;a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos"&gt;
                &lt;div class="content-1of5"&gt;XXS&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="flexgrid-cell"&gt;
              &lt;a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos"&gt;
                &lt;div class="content-1of5"&gt;XXS&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="flexgrid-cell"&gt;
              &lt;a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos"&gt;
                &lt;div class="content-1of5"&gt;XXS&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>