CSS网格项目溢出到正文之外（使滚动条出现）

Question

以下是我要修复的行为的片段：https://streamable.com/vr0rf

我不明白为什么我的右边会有空白，当我将鼠标悬停在开发工具中的元素上时，看起来好像什么都没有。这是由“ editor” div中的某些内容引起的，该div中包含CKEditor5文本编辑器。我可以通过将主体溢出设置为隐藏来修复它，但是当窗口足够窄以至于实际元素溢出时，我将无法滚动。

html,
body,
#root {
  margin: 0;
  height: 100%;
  width: 100%;
}

#app {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    editor"
    "footer footer";

  grid-template-columns: 150px 1fr;
}

#header {
  display: flex;
  flex-direction: row;
}

#nav {
  grid-area: nav;
  border: 1px solid black;
  padding: 10px;

  ul {
    padding: 0;
    margin: 0;
  }
  li {
    list-style-type: none;
    border: 1px solid black;
  }
}

#editor {
  grid-area: editor;
  border: 1px solid black;
  min-width: 300px;
}

#footer {
  grid-area: footer;
}

Answer 1

没有看到实际的HTML，很难说什么。这就是为什么您应该发布摘要。观看视频非常烦人，因为鼠标快速跳来跳去，几乎无法检查任何内容。

我建议将车身的宽度设置为100vw（而不是100％），将最大宽度设置为100％。那应该防止任何水平滚动。

如果没有帮助（同样，如果没有实际的脚本/代码，很难测试），请尝试更改网格元素宽度的设置，以视口相关的相对值并设置最小和最大宽度值。

body {
   width: 100vw;
   max-width: 100%;
}