title: Flexbox Layout with image overlaps
body: <p>I ran into a hitch where I'm trying to replicate this:</p>
  
  <p><a href="https://i.stack.imgur.com/ROoXC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ROoXC.jpg" alt="enter image description here"></a></p>
  
  <p>I can't seem to have the image occupy the container width and overlap the black box. I had a working copy but it was not friendly for mobile/desktop. Here's a quick example in codepen: <a href="https://codepen.io/pandar3n/pen/jQqvjm" rel="nofollow noreferrer">https://codepen.io/pandar3n/pen/jQqvjm</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="test-container"&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="test-img"&gt;&lt;img src="https://placekitten.com/800/300" /&gt;&lt;/div&gt;
      &lt;div class="test-text"&gt;
        &lt;div class="testtext-inner"&gt;
          &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
            est. Mauris placerat eleifend leo.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="test-container alt"&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="test-img"&gt;&lt;img src="https://placekitten.com/800/300" /&gt;&lt;/div&gt;
      &lt;div class="test-text"&gt;
        &lt;div class="testtext-inner"&gt;
          &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>*{
    font-family: sans-serif;
  }
  .test-container {
    .wrapper {
      max-width: 80vw;
      margin: 50px auto;
      position: relative;
      display: flex;
      height: 80vh;
    }
    .test-text {
      width: 50%;
      background-color: #aaa;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .testtext-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
    }
  
  .test-img {
    width: 50%;
    align-self: center;
  
    img {
      transform: translateX(80px);
    }
  }
  
  &amp;.alt {
    .test-text {
      order: 1;
  
      .testtext-inner {
        padding-right: 150px;
        padding-left: 50px;
      }
    }
    .test-img {
      order: 2;
  
      img {
        transform: translateX(-80px);
      }
    }
  }
  }
  </code></pre>
  
  <p>Managed to get the alternating layouts to work but the image won't occupy the white space to the left/right.</p>
  
  <p>Would a 60% 50% flex work?</p>