title: Flexbox - image on the right side
body: <p>I have an image on the right side item of a flex container. As you can see in the codepen, there is a gap when expanding the screen (caused by the max-width on the image, which is unavoidable).</p>
  
  <p>However I'm just wanting to move that image to the extreme right-side, so the gap isn't as noticeable.</p>
  
  <p>This needs to be friendly with IE11, and the image needs to be responsive. I would like to avoid using a float on the image if possible (would've thought there is a cleaner way of achieving this using flexbox)?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="image"&gt;
      &lt;img src="http://www.stevensegallery.com/1000/1400"&gt;
    &lt;/div&gt;
    &lt;div class="text"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
    background-color: red;
    display: flex;
    flex-direction: row-reverse;
  }
  .container &gt; .image {
    flex: 1 0 0%;
  }
  .image &gt; img {
    display: block;
    max-width: 100%;
    max-height: 300px;
  }
  .container &gt; .text {
    flex: 2 0 0%;
  }
  </code></pre>
  
  <p>Codepen:
  <a href="https://codepen.io/neilem/pen/zjpXKZ" rel="noreferrer">https://codepen.io/neilem/pen/zjpXKZ</a></p>