为什么我的CSS网格在其祖先显示时收缩：flex？

Question

当下面的代码中的祖先是display: block时，它按照预期工作。当它是display: flex嵌套网格缩小。

我想了解为什么会发生这种情况。

只需在下面的代码中取消注释display: block即可查看结果。电网停下来跨越允许的整个区域。

.ctnr{ 
 
    display: flex; 
 
    //display: block; 
 
    flex-flow: column; 
 
    align-items: stretch; 
 
} 
 
header{ background: red; height: 2rem; } 
 
main{ 
 
\t max-width: 15rem; 
 
\t height: 25rem; 
 
\t margin: auto; 
 
\t overflow: auto; 
 
} 
 

 
.grid{ 
 
    display: grid; 
 
\t 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"; 
 
\t grid-gap: 10px; 
 
} 
 
.grid article{ 
 
\t 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>

这是通过给予宽度主

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

这种“决心”的问题解决了，但是我真的不明白这里发生了什么。例如，header即使没有宽度也不缩小。

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是一个flex项目，这条规则告诉它消耗线路上所有可用空间。这具有挤出所有空闲空间并将物品垂直和水平居中的效果。

但是，Flex自动边距在块布局中不能像这样工作，这就是为什么与display: block有不同的渲染差异。

如果您希望项目保持全宽，如块布局，请使用min-width而不是max-width。这确实的伎俩：

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

revised demo 1

OR，只需添加width: 100%。这也做的伎俩：

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

revised demo 2

所以，margin: auto使得柔性布局有很大的区别。如果将相同的规则应用于标题，则会得到类似的结果。

revised demo 3

详细了解这里的柔性自动边距：

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?