When the ancestor in the code below is display: block it is working as intended. When it's display: flex the nested grid shrinks.
I'd like to understand why this happens.
Just uncomment the display: block in the code below to see the result. The grid stops to span the whole area it's allowed to.
.ctnr{
display: flex;
//display: block;
flex-flow: column;
align-items: stretch;
}
header{ background: red; height: 2rem; }
main{
max-width: 15rem;
height: 25rem;
margin: auto;
overflow: auto;
}
.grid{
display: grid;
height: 25rem;
align-items: stretch;
grid-template-areas:
"c1 c1 c1 c2 c3 c3 c3"
"c4 c4 c4 c4 c3 c3 c3"
"c4 c4 c4 c4 c5 c6 c6"
"c4 c4 c4 c4 c7 c7 c7";
grid-gap: 10px;
}
.grid article{
cursor: pointer;
}
.grid article:nth-child(odd){
background: yellow;
}
.grid article:nth-child(even){
background: cyan;
}
.c1{ grid-area: c1; }
.c2{ grid-area: c2; }
.c3{ grid-area: c3; }
.c4{ grid-area: c4; }
.c5{ grid-area: c5; }
.c6{ grid-area: c6; }
.c7{ grid-area: c7; }<div class="ctnr">
<header></header>
<main>
<div class="grid">
<article class="c1">1</article>
<article class="c2">2</article>
<article class="c3">3</article>
<article class="c4">4</article>
<article class="c5">5</article>
<article class="c6">6</article>
<article class="c7">7</article>
</div>
</main>
<footer></footer>
</div>This is resolved by giving a width to main
main{
width: 90%;
max-width: 15rem;
// ...
}
This "resolve" the issue, however I don't really get what's happening here. For instance the header is not shrinking even tho it has no width.