我试图了解Flexbox如何更好地工作。在这个例子中，如果你增加.next-news-articles的margin-bottom，'police'div增加它的大小以适应容器，这也破坏了它的3：2宽高比，但橙色div保持相同的大小同时保持6：1的宽高比。
如何阻止警察div增长以适应其父容器的高度？添加flex增长0并不会阻止它增长。 .next-news-articles有2％的边距底部可以将它们分开，但我宁愿在其父级（.smaller-index-news-articles-wrap）上使用justify-content：space-between，但是这增加了警察形象的大小，因为它增长以适应容器。如何解决这个问题？
另外，为什么在将flex shrink设置为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>