CSS Grid and Flex - Content going beyond the specified columns - css

Question

I'm trying to create a page using css grid and flex. I have defined the grid areas and positioned them.
When I'm adding content to blog-post-list section contents goes beyond <section> the specified area.
I'm expecting 3rd and 4th blog-card boxes to go to next row rather than going across the aside. Shouldn't it act like a container if it has more content its height get increase ?
TIA
body{
color: #000;
text-align: center;
}
.content{
display:grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 2px;;
max-width:960px;
margin: 0 auto;
}
.content > *{
background: #3bbced;
padding: 30px;
}
header{
grid-column: 1/13;
}
nav{
grid-column: 1/13;
}
section{
grid-column: 1/8;
grid-row: 3/9;
}
aside{
grid-column: 8 /13;
grid-row: 3/9;
}
footer{
grid-column: 1 / 13;
}
.blog-post-list{
display: flex;
}
.blog-card{
border: 1px solid black;
padding: 20px;
margin: 15px;
min-width: 38%;
}
<div class="content">
<header>
header
</header>
<nav>
Navigation
</nav>
<section>
<div class="blog-post-list">
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</section>
<aside>
aside
</aside>
<footer>
Footer
</footer>
</div>

Answer 1

You should change this part with flex-wrap. If you want to have all in same row then you should give smaller percentage for child elements
.blog-post-list{
display: flex;
flex-wrap: wrap;
}
body{
color: #fff;
text-align: center;
}
.content{
display:grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 2px;;
max-width:960px;
margin: 0 auto;
}
.content > *{
background: #3bbced;
padding: 30px;
}
header{
grid-column: 1/13;
}
nav{
grid-column: 1/13;
}
section{
grid-column: 1/8;
grid-row: 3/9;
}
aside{
grid-column: 8 /13;
grid-row: 3/9;
}
footer{
grid-column: 1 / 13;
}
.blog-post-list{
display: flex;
flex-wrap: wrap;
}
.blog-card{
border: 1px solid black;
padding: 20px;
margin: 15px;
min-width: 38%;
}
<div class="content">
<header>
header
</header>
<nav>
Navigation
</nav>
<section>
<div class="blog-post-list">
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="blog-card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</section>
<aside>
aside
</aside>
<footer>
Footer
</footer>
</div>