HTML 网格布局被 SVG child 元素打乱

Question

我正在尝试制作一个具有简单 3x3 网格布局的页面：header 顶部、页脚底部、两个侧边栏和主显示。一切正常，直到我添加应该填充 main-display div:

的 SVG 元素

<div class="main">
  <svg viewBox="0 0 500 500"></svg>
</div>

此时整个网格布局变得混乱，浏览器删除了 header，将页面扩展到我声明的 height: 100% 下方，等等。

我可以轻松地 "fix" 通过将我的 SVG max-height 和 max-width 设置为任意小（在 Firefox 62.0.3 中低于 ~60%；在 Safari 12.0 中，<90%） .但这并不是真正的修复，因为它留下了明显的差距（在 Firefox 中是一个巨大的差距）。我更喜欢调整 SVG 100% 的大小以在网格中填充它的 space。我肯定错过了什么。我究竟做错了什么？

编辑：添加我想要的和我拥有的（一个版本）的屏幕截图。

Here is what I have. Here就是我想要的

您所看到的样式表如下。两个图像之间的唯一区别是 max-width 和 max-height 从 10% 到 100% 的变化。

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      display: grid;
      border-style: solid; // to show that body renders improperly
      border-color: red;
      grid-template-columns: 3fr 9fr 2fr;
      grid-template-rows: 1fr 10fr 1fr;
      width: 100vw;
      height: 100vh;
    }

    div {
      border: solid black 1px; // to show div positions
    }

    .header {
      grid-column: 1 / 4;
      grid-row: 1;
    }

    .main {
      grid-column: 2;
      grid-row: 2;
    }

    .side1 {
      grid-column: 1;
      grid-row: 2;
    }

    .side2 {
      grid-column: 3;
      grid-row: 2;
    }

    .footer {
      grid-column: 1 / 4;
      grid-row: 3;
    }

    svg {
      max-height: 100%; 
      max-width: 100%;
    }

<body>
  <div class="header">Header</div>
  <div class="side1">Site 1</div>
  <div class="main">
    <svg viewBox="0 0 500 500"></svg>
  </div>
  <div class="side2">Site 2</div>
  <div class="footer">Footer</div>
</body>

Answer 1

请看下面。没有遇到问题。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 3fr 9fr 2fr;
  grid-template-areas: "header header header" "side1 main side2" "footer footer footer";
}

.wrapper>div {
  border: thin solid black;
  /* For visibility only */
}

.header {
  grid-area: header;
}

.side1 {
  grid-area: side1;
}

.main {
  grid-area: main;
}

.side2 {
  grid-area: side2;
}

.footer {
  grid-area: footer;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="side1">Site 1</div>
  <div class="main"><svg viewBox="0 0 500 500"></svg></div>
  <div class="side2">Site 2</div>
  <div class="footer">Footer</div>
</div>

Answer 2

事实证明，问题根本不在于 svg 元素，而在于其包含的 div（问题代码片段中的 .main）。与弹性项目一样，网格项目具有默认值 min-width: auto 和 min-height: auto。通过将它们设置为 0，svg 可以自动调整大小。

我还是不太明白为什么svg打乱了布局，尤其是在Firefox中设置为80%，周围留下显眼的space，但是网格布局的问题本身就够清楚了。

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      display: grid;
      grid-template-columns: 3fr 9fr 2fr;
      grid-template-rows: 1fr 10fr 1fr;
      width: 100vw;
      height: 100vh;
    }

    div {
      border: solid black 1px; // to show div positions
    }

    .header {
      grid-column: 1 / 4;
      grid-row: 1;
    }

    .main {
      grid-column: 2;
      grid-row: 2;
      min-width: 0;
      min-height: 0;
    }

    .side1 {
      grid-column: 1;
      grid-row: 2;
    }

    .side2 {
      grid-column: 3;
      grid-row: 2;
    }

    .footer {
      grid-column: 1 / 4;
      grid-row: 3;
    }

    svg {
      max-height: 100%; 
      max-width: 100%;
    }

<body>
  <div class="header">Header</div>
  <div class="side1">Site 1</div>
  <div class="main">
    <svg viewBox="0 0 500 500"></svg>
  </div>
  <div class="side2">Site 2</div>
  <div class="footer">Footer</div>
</body>

HTML 网格布局被 SVG child 元素打乱

HTML grid layout disrupted by SVG child element

html

css

svg

grid-layout