Остановите растяжение гибкого элемента, чтобы оно соответствовало контейнеру, и сохраняйте пропорции

Question

Я пытаюсь понять, как работают флексбоксы. В этом примере, если вы увеличите нижнюю границу .next-news-article, div 'Police' увеличивает свой размер, чтобы соответствовать контейнеру, что также разрушает его соотношение сторон 3: 2, но оранжевый div остается прежним размером сохраняя соотношение сторон 6: 1.

Как я могу остановить рост полицейского подразделения в соответствии с высотой его родительского контейнера? Добавление flex-роста 0 не препятствует его росту. .Next-news-статьи имеют маржинальное дно 2% для их разметки, но я бы предпочел использовать justify-content: space -ween в родительском (.smaller-index-news-article-wrap), но это увеличивает размер полицейского имиджа по мере того, как он подходит к контейнеру. Как это можно исправить?

Кроме того, почему максимальный размер уменьшается при установке значения flex на 0, поскольку есть 2 дочерних элемента для общего доступа к области.

Подробное объяснение будет высоко ценится. Спасибо за помощь

.news-tc-top-wrap {
    width: 100%;
    height: auto;
    display: flex;
  background: pink;
}
.first-news-article-wrap {
    margin-right: 2%;
    width: 45%;
    flex-basis: 45%;
    display: flex;
    flex-direction: column;
}
.first-news-article {
    height: auto;
    background-position: center center !important;
    background-size: cover !important;
    width: 100%;
    flex-basis: 100%;
    padding-bottom: 66.666%;
    margin-right: 0;
    flex-grow: 0;
}
.first-news-article-description {
    overflow: hidden;
    width: 100%;
    background: #375db5;
    padding-bottom: 25%;
    position: relative;
    background: orange;
}
.first-news-article-description-absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 15px;
}
.smaller-index-news-articles-wrap {
    width: 53%;
    flex-basis: 53%;
    display: flex;
    flex-direction: column;
 /* justify-content: space-between; */
}
.next-news-articles {
    height: auto;
    float: left;
    margin-bottom: 2%; /* setting as 0 destroys the police image's aspect ratio */
    position: relative;
  overflow: hidden;
}
.next-news-article-image {
    width: 36.375%;
    height: auto;
    padding-bottom: 24.25%;
    float: left;
    background-size: cover;
    background-position: center center;
}
.next-news-article-description {
    background: #375db5;
    float: left;
    width: 63.667%;
    height: 100%;
    position: absolute;
    right: 0;
    padding: 15px;
    overflow: hidden;
}

<div class="news-tc-top-wrap">
    <div class="first-news-article-wrap">
    <div class="first-news-article" style="background-image: url(https://cml.sad.ukrd.com/image/527245-800x800.jpg)"></div>
<div class="first-news-article-description">
    <div class="first-news-article-description-absolute">
            <h2 style=""><a href="/news/local-news/17324/the-players-tiger-woods-fires-72-as-phil-mickelson-slumps-to-seven-over/">The Players: Tiger Woods fires 72 as Phil Mickelson slumps to seven over</a></h2>
            <span><a href="/news/">Mix 96 News</a></span>
    </div>
        </div>
        </div>
<div class="smaller-index-news-articles-wrap">
  <div class="next-news-articles">
    <div class="next-news-article-image" style="background-image: url(http://mix96.matt.hicks/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F05%2F300x225%2Fskysports-dustin-johnson-golf_4305787.jpg%3F20180510151451);"></div>
    <div class="next-news-article-description">
        <h3><a href="/news/local-news/17325/the-players-world-no-1-dustin-johnson-in-six-way-tie-for-lead/">The Players: World No 1 Dustin Johnson in six-way tie for lead</a></h3>
        <span><a href="/news/">Mix 96 News</a></span>
    </div>
</div>                                                                            <div class="next-news-articles">
    <div class="next-news-article-image" style="background-image: url(http://mix96.matt.hicks/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F03%2F300x225%2Fskysports-gareth-southgate_4262848.jpg%3F20180323102711);"></div>
    <div class="next-news-article-description">
        <h3><a href="/news/local-news/17322/gareth-southgates-england-world-cup-squad-to-be-announced-on-may-16/">Gareth Southgate's England World Cup squad to be announced on May 16</a></h3>
        <span><a href="/news/">Mix 96 News</a></span>
    </div>
</div>                                                                             <div class="next-news-articles">
    <div class="next-news-article-image" style="background-image: url(http://mix96.matt.hicks/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F05%2F300x225%2Fjose-mourinho-man-utd-premier-league_4306289.jpg%3F20180510233715);"></div>
    <div class="next-news-article-description">
        <h3><a href="/news/local-news/17326/jose-mourinho-defends-manchester-uniteds-under-par-performance-in-draw-at-west-ham/">Jose Mourinho defends Manchester United's under-par performance in draw at West Ham</a></h3>
        <span><a href="/news/">Mix 96 News</a></span>
    </div>
</div>
    </div>
</div>