title: How to make css flex box row auto resizing horizontally with image
body: <p>When flex-basis:auto is set on a div, the div expands vertically to fit contents.</p>
  
  <p><a href="https://jsfiddle.net/knjesznx/1/" rel="nofollow noreferrer">Example</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;div class="image"&gt;
      &lt;img src="http://placebacon.net/400/103"&gt;
    &lt;/div&gt;
    &lt;div class="text"&gt;
      -- Removed for readability --
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>scss:</p>
  
  <pre><code>.parent {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:flex;
    flex-direction:column;
  
    .image {
      flex-basis:auto;
      flex-grow:0;
      flex-shrink:0;
  
      img {
        width:100%;
        height:auto;
      }
    }
  
    .text {
      flex-basis:0px;
      flex-grow:1;
      flex-shrink:1;
  
      overflow-y:scroll;
    }
  }
  </code></pre>
  
  <p>However this does not work horizontally :</p>
  
  <p><a href="https://jsfiddle.net/knjesznx/3/" rel="nofollow noreferrer">Example 2</a></p>
  
  <pre><code>.parent {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:flex;
    flex-direction:row;
  
    .image {
      flex-basis:auto;
      flex-grow:0;
      flex-shrink:0;
  
      img {
        height:100%;
        width:auto;
      }
    }
  
    .text {
      flex-basis:0px;
      flex-grow:1;
      flex-shrink:1;
  
      overflow-y:scroll;
    }
  }
  </code></pre>
  
  <p>If you resize the height of the parent, the image will change size to preserve aspect ratio. However the flex box retains the size of the image before the transformation.</p>
  
  <p>Is there a CSS property I need to set to get the expected behavior?</p>