Why does my CSS mesh shrink when its ancestor: flex is displayed?

Question

When the ancestor in the code below display: block, it works as intended. When it is display: flex, the nested mesh shrinks.

I would like to understand why this is happening.

Just uncomment display: blockin the code below to see the result. The grid stops to cover the entire area in which it is allowed.

.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>

Run code

This is allowed by specifying the width of the main

main{
    width: 90%;
    max-width: 15rem;
    // ...
}

This will "solve" the problem, but I really do not understand what is happening here. For example, it headerdoes not shrink, even if it does not have a width.

https://jsfiddle.net/6k2313ub/1/

Answer 1

:

main {
    max-width: 15rem;
    height: 25rem;
    margin: auto;
    overflow: auto;
}

main max-width: 15rem.

(100% - 15rem).

main margin: auto. , main , , . .

, , display: block.

, , , , min-width max-width. :

main {
    min-width: 15rem; /* adjusted */
    height: 25rem;
    margin: auto;
    overflow: auto;
}

1

, width: 100%. :

main {
    width: 100%; /* new */
    max-width: 15rem;
    height: 25rem;
    margin: auto;
    overflow: auto;
}

2

, margin: auto . , .

3

flex auto margin :

• CSS Flexbox, " " ? "justify-self" ?