html - 阻止 flex 项目增长以适应容器并保持其纵横比

Question

我试图了解 flexbox 如何更好地工作。在这个例子中，如果你增加 .next-news-articles 的 margin-bottom，'police' div 会增加它的大小以适应容器，这也破坏了它的 3:2 纵横比，但橙色 div 保持相同的大小同时保持其 6:1 的纵横比。

如何阻止警察 div 增长以适应其父容器的高度？添加 0 的弹性增长并不能阻止它增长。.next-news-articles 有 2% 的 margin-bottom 将它们隔开，但我宁愿在其父级（.smaller-index-news-articles-wrap）上使用 justify-content: space-between，但是随着警察图像的增长以适应容器，这会增加警察图像的大小。如何解决这个问题？

另外，为什么将 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>

标签： htmlcssflexbox