Chrome中的100%视点(vw)不能工作？

Question

我试图重新实现这个码页，我注意到vw声明对于chrome来说很奇怪。每当我在本地服务器上运行这段代码时，即使我声明GalleryGrid应该有100 in，它并不是仅在chrome中正确调整大小。其他浏览器如Firefox和Safari运行良好。有人知道为什么会这样吗？

铬

​

Safari/Firefox

​

<div class="front margin">
  <GalleryGrid>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </GalleryGrid>
</div>

CSS

    GalleryGrid{
      --content-width: 100vw;
      --gutter: 1.5em;
      --columns: 1;
      --width-size: calc(
        ( var(--content-width) - (var(--gutter) * (var(-- 
      columns) - 1))
        ) / var(--columns)
      );
      --row-size: calc(
        ((var(--width-size) * 3)/ 2));
      display: grid;
      width: 100%;
      max-width: var(--content-width);
      grid-template-columns: repeat(var(--columns), 1fr);
      grid-auto-rows: var(--row-size);
      grid-column-gap: var(--gutter);
      grid-row-gap: var(--gutter);
    }

    .item {
      position: relative;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),
                  0 2px 4px 0 rgba(0,0,0,0.08);
     }
   .front {
     font-family: Noto Sans, Arial, sans-serif;
     padding: 3em 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
    .margin{
        margin-left: 4%!important;
        margin-right: 4%!important;
    }

Answer 1

你让GalleryGrid坐在一个容器里，里面有一个margin类，它有左边和右边。由于您将GalleryGrid的宽度设置为100%，而不是100 of，所以将这些内容添加到边。