I'm trying to understand how flexboxes work better. In this example, if you increase the margin-bottom of .next-news-articles, the 'police' div increases its size to fit the container, which also destroys its 3:2 aspect ratio, yet the orange div stays the same size while maintaining its 6:1 aspect ratio.
How can I stop the police div from growing to fit the height of its parent container? Adding a flex grow of 0 doesn't prevent it from growing. The .next-news-articles have a margin-bottom of 2% to space them out, but I'd rather use justify-content: space-between on its parent (.smaller-index-news-articles-wrap), but this increases the size of the police image as it grows to fit the container. How can this be fixed?
Also, why does the size max out when setting flex shrink to 0, as there are 2 child items to share the area.
A detailed explanation would be much appreciated. Thanks for the help
.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>