title: Flexbox image and text
body: <p>I have some difficulties using Flexbox. What i want to achieve is to have 2 Items. </p>
  
  <p>The First is an image (of any size) and the first item's size (height and width) should be same as the size of the image) while the 2nd item is a text, the width of the div of the text must be the remaining size of the container and the height should be the height of the image.</p>
  
  <pre><code>.container {
    display: flex;  
    flex-flow: row;
  }
  .image {
    background: hotpink;
     max-width: 100%;
     width : auto;
    flex: 0 1 auto;
  }
  .title {
    text-align: center;
    flex: 2;
    background: deepskyblue;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ksLm5520/1/" rel="nofollow">Please see this</a></p>
  
  <p>please let me know what happening to my code. </p>
  
  <p>TIA!</p>