title: Fitting flex divs with image to “above the fold”
body: <p>I have the following layout, made using flex.</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>.flexcontainer {
    display: flex;
    flex-direction: column;
  }
  
  .subcontainer1 {
    display: flex;
    flex-direction: row;
  }
  
  .subcontainer2 {
    display: flex;
    flex-direction: row;
  }
  
  .subcontainer1 .avatar {
    flex: 1 0 5%;
  }
  
  .subcontainer1 .user {
    flex: 1 0 80%;
  }
  
  .subcontainer1 .time {
    flex: 1 0 10%;
  }
  
  .subcontainer2 .text {
    flex: 2 0 0;
  }
  
  .subcontainer2 .media {
    flex: 1 0 0;
  }
  
  .media img {
     max-width: 100%;
     max-height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexcontainer"&gt;
    &lt;div class="subcontainer1"&gt;
      &lt;div class="avatar"&gt;
        &lt;img src="https://i2.wp.com/oneword365.com/wp-content/uploads/oph-Avatar.png?resize=73%2C73"/&gt;
      &lt;/div&gt;
      &lt;div class="user"&gt;
        &lt;div class="title"&gt;Sue Smith&lt;/div&gt;
        &lt;div class="subtitle"&gt;PincoPallino&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="time"&gt;
        15th August 2017
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="subcontainer2"&gt;
      &lt;div class="text"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel porttitor risus. Integer dictum massa ac mollis posuere. Etiam dapibus odio euismod lacus tempus tempor. Donec sagittis eget purus non rhoncus. Ut ac est turpis. Ut et ornare felis. Vestibulum at facilisis sed.
      &lt;/div&gt;
      &lt;div class="media"&gt;
        &lt;img src="https://pbs.twimg.com/media/Doc_24PWsAAnx5w.jpg"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see I set the image size to fit the div:</p>
  
  <pre><code>max-width: 100%;
  max-height: 100%;
  </code></pre>
  
  <p>But doing this makes it so that the div containing the image grows off screen instead of stopping in the "above the fold" section of my page (in other words what the users see in the first screen).</p>
  
  <p>If you run the snippet or open my <a href="https://codepen.io/anon/pen/yReEya" rel="nofollow noreferrer">CodePen link</a>, you can see in both cases that the image fits inside the div, but the div doesn't fit in the above the fold section.</p>
  
  <p>I would like to have the div to not go below the screen and the image to have the size of the div rather than the other way around.</p>
  
  <p>Since the image is dinamically loaded, is it possible to do this using HTML and CSS?</p>