title: How to use image inside a div without moving the other elements
body: <p>I'm using flex-box and I'm trying to make my website responsive. Right now I need to put an image inside the yellow divs but when I do that all the structure changes cause of that. I trying playing around with the width and height but could make that work. Hope one of you could help me out</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>:root {
    --main-color: #0077be;
  }
  
  body {
    font-family: "Open Sans", sans-serif;
    text-align: right;
  }
  
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  div {
    border: 1px solid gray;
  }
  
  .screen {
    padding: 100px;
    background-color: #ededed;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .wrapper {
    width: 1200px;
    height: 450px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }
  
  .section-title {
    flex-grow: 1;
  }
  
  .news-conainer {
    flex-grow: 11;
    display: flex;
    flex-direction: column;
    padding: 17px;
  }
  
  .main-news {
    flex-grow: 11;
    display: flex;
    flex-direction: row-reverse;
  }
  
  .foot-news {
    flex-grow: 1;
  }
  
  .right {
    flex-grow: 7;
    display: flex;
    flex-direction: row-reverse;
    margin-left: 20px;
  }
  
  .left {
    flex-grow: 10;
    display: flex;
    flex-direction: column;
  }
  
  .img {
    max-height: 100%;
    overflow: hidden;
  }
  
  .img img {
    max-width: 100%;
    min-height: 100%;
  }
  
  .info {
    flex-grow: 1;
  }
  
  .left-news {
    flex-grow: 1;
    display: flex;
    flex-direction: row-reverse;
  }
  
  .left-news:nth-child(2) {
    margin: 10px 0;
  }
  
  .left-news-img {
    flex-grow: 1.5;
    background-color: yellow;
  }
  
  .left-news-info {
    flex-grow: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="screen"&gt;
        &lt;div class="wrapper"&gt;
          &lt;div class="section-title"&gt;title&lt;/div&gt;
          &lt;div class="news-conainer"&gt;
            &lt;div class="main-news"&gt;
              &lt;div class="right"&gt;
                &lt;div class="img"&gt;
                  &lt;img src="./new1.JPG" alt="" /&gt;
                &lt;/div&gt;
                &lt;div class="info"&gt;info&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="left"&gt;
                &lt;div class="left-news"&gt;
                  &lt;div class="left-news-img"&gt;
                  &lt;img src="./new1.JPG" alt="" /&gt;
                  &lt;/div&gt;
                  &lt;div class="left-news-info"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="left-news"&gt;
                  &lt;div class="left-news-img"&gt;
                  &lt;img src="./new1.JPG" alt="" /&gt;
                  &lt;/div&gt;
                  &lt;div class="left-news-info"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="left-news"&gt;
                  &lt;div class="left-news-img"&gt;
                  &lt;img src="./new1.JPG" alt="" /&gt;
                  &lt;/div&gt;
                  &lt;div class="left-news-info"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="foot-news"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The result I need is at the yellow divs to include a &lt; img > tag  without destroying the other sizes and their positions</p>
  
  <p>Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/sNjgp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sNjgp.jpg" alt="enter image description here"></a></p>
  
  <p>result by adding</p>
  
  <pre><code>.left-news-img {
  max-width: 30%;
  }
  .left-news-img &gt; img {
    max-width: 100%;
     }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/GMOUE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GMOUE.jpg" alt="enter image description here"></a></p>