title: Keeping image aspect ratio in flex box
body: <p>So I want to have text next to the image, and both centered. Flexbox seems like it could work well for this but the image keeps getting squished. Any ideas of how I can keep the image in its original aspect ratio?</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>.container {
    display: flex;
    width: 60%;
    margin: 0 auto;
    border: red 1px solid;
  }
  img {
    height: 300px;
    width: 300px;
  }
  p {
    padding: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;p class="inner"&gt;Lorem Pisum Doelem sipsum iflup getsup in da tubsusb
    &lt;/p&gt;
    &lt;img src="https://i.vimeocdn.com/portrait/15351700_300x300" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is an example of what I'm trying to do. I think flex box will work for this, I'm just having a little trouble.</p>
  
  <p><a href="http://mojave-demo.squarespace.com/our-team-mojave/" rel="nofollow">http://mojave-demo.squarespace.com/our-team-mojave/</a></p>