为什么我的CSS Grid在其祖先显示时会缩小：flex？

Question

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

我想知道为什么会这样。

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

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

通过给main添加宽度来解决这个问题

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自动边距不会像这样工作，这就是为什么与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在flex布局中有很大的不同。 如果您对标题应用相同的规则，您将得到类似的结果。

修订演示3

在此处了解有关flex auto margin的更多信息：

• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？