title: Scale flex box height to fit image div
body: <p>I am building a chat message and I want to fit an image inside the text bubble. The bubble has a fixed width and should scale its height depending on the image aspect ratio.</p>
  
  <p>I am unable to scale the div to maintain the <code>img</code> aspect ratio. All of the answers found use an <code>&lt;img&gt;</code> tag, while I am using a div and none of that fixed my issue.  </p>
  
  <p>This is the desired outcome: </p>
  
  <p><a href="https://i.stack.imgur.com/0Ic6G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Ic6G.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/cZs8K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cZs8K.png" alt="enter image description here"></a></p>
  
  <p>What I have achieved instead is either a very small <code>img</code> (size of an empty speech bubble if I do not impose any vertical or horizontal dimension) or a long <code>img</code> if I impose the width and keep the height dynamic.</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>.speech-right-wrapper {
    max-width: 90%;
    display: flex;
    flex-direction: column;
  }
  
  speech-right-message-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
  
  .speech-right-bubble {
    position: relative;
    background: rgb(154, 226, 255);
    box-shadow: 0px 1px 2px gray;
    border-radius: 15px 0 15px 15px;
    display: flex;
  }
  
  .bubble-background {
    width: 200px;
    height: auto;
    overflow: hidden;
  }
  
  .bubble-background-img {
    position: absolute;
    border-radius: 15px 0 15px 15px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: no-repeat;
    background-size: cover;
    background-position: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="speech-right-wrapper"&gt;
    &lt;div class="speech-right-message-container"&gt;
      ...
      &lt;div class="speech-right-bubble"&gt;
        &lt;div class="bubble-background"&gt;
          &lt;div class="bubble-background-img" v-bind:style="{ 'background-image': 'url(' + require('../assets/img/profiles/' + storyPath + bubble.bubble_background) + ')' }" v-bind:alt="bubble.bubble_background"&gt;&lt;/div&gt;
        &lt;/div&gt;
        ...
      &lt;/div&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>For clarity, I need the <code>&lt;div class="bubble-background-img"&gt;</code> to be fix in width (say 200px) and <code>height: auto</code> to maintain the image aspect ratio; and I need the <code>&lt;div class="speech-right-bubble"&gt;</code> to scale to fit the image inside.</p>
  
  <p>Also, unfortunately I need to use a <code>&lt;div&gt;</code> tag because <code>v-bind:src</code> seems not to work for local images. If I do:</p>
  
  <pre><code>&lt;img class="bubble-background-img" v-bind:src="'../assets/img/profiles/' + storyPath + bubble.bubble_background"/&gt;
  </code></pre>
  
  <p>I get this: <a href="https://i.stack.imgur.com/vbFZB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vbFZB.png" alt="enter image description here"></a></p>