After extensive testing, I have found that the .articleWrapper for post child items scales correctly when used on its own. However, as soon as I place this .articleWrapper inside another wrapper-element with display: flex, it loses its ability to scale horizontally after reaching a certain point.
I suspect there is a flaw in my logic somewhere, but I just can't seem to pinpoint it.
Here is the code snippet that illustrates the issue. When I remove display: flex and flex-wrap: wrap;, the grid functions perfectly. Similarly, replacing flex with block also works fine. But adding back in display: flex; causes the grid content to no longer stack as desired.
.siteWrapper {
display: flex;
flex-wrap: wrap;
}
.articleWrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(285px, 1fr));
max-width: 1100px;
margin: auto;
}
article {
background-color: red;
}<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="siteWrapper">
<div class="articleWrapper">
<article>
<h1>Title</h1>
<p>Para</p>
</article>
<article>
<h1>Title</h1>
<p>Para</p>
</article>
</div>
</div>
</body>