不需要时出现垂直滚动条

Question

我有这个代码：

* {
  box-sizing: border-box;
}

#root {
  background-color: green;
  padding: 0;
  margin: 0;
  width: 600px;
  height: 400px;
  overflow-x: auto; /* Show horizontal scrollbar */
  overflow-y: auto; /* Show vertical scrollbar only if content overflows vertically */
}

#root2 {
  padding: 0;
  margin: 0;
  background-color: blue;
  width: 800px; /* Wider than parent to show horizontal scrollbar */
  height: 400px; /* Same height as parent initially */
}

<div id="root"><div id="root2"></div></div>

问题是水平滚动条按预期出现，但我不明白为什么也会出现垂直滚动条（因为子项和父项具有相同的高度，所以没有垂直滚动条是不必要的），尽管它什么也没做。我想要的是滚动条仅在孩子身高超过父母身高时出现。感谢任何帮助

Answer 1

100%

改为采用父容器的大小。

#root2 {
    padding: 0;
    margin: 0;
    background-color: blue;
    width: 100%; /* Wider than parent to show horizontal scrollbar */
    height: 100%; /* Same height as parent initially */
}