为什么我的 CSS 网格在其祖先为 display: 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{
 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;
    // ...
}

这是 "resolve" 的问题，但是我真的不明白这里发生了什么。例如 header 即使没有宽度也不会缩小。

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

Answer 1

这是您问题的根源：

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

main 元素设置为 max-width: 15rem。

这样就剩下很多空闲space就行了(100% - 15rem)。

main 元素也设置为 margin: auto。因为 main 是一个弹性项目，这条规则告诉它从每一边平均消耗线上所有空闲的 space 。这具有挤出所有空闲 space 并将项目垂直和水平居中的效果。

但是 flex auto 边距在块布局中并不像这样工作，这就是 display: block 呈现差异的原因。

如果您希望项目保持全宽，例如在块布局中，请使用 min-width 而不是 max-width。这就是诀窍：

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

revised demo 1

或者，只需添加 width: 100%。这也可以解决问题：

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

revised demo 2

因此，margin: auto 在 flex 布局上有很大的不同。如果您将相同的规则应用于 header，您将得到类似的结果。

revised demo 3

在此处了解有关弹性自动边距的更多信息：

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

为什么我的 CSS 网格在其祖先为 display: flex 时缩小？

Why is my CSS Grid shrinking when its ancestor is display: flex?

html

css

flexbox

css-grid