隐藏CSS滚动条，直到满足最大宽度和最大高度条件

Question

当div中的内容超过最大宽度时，我试图显示滚动条。

以下是显示滚动位置的代码段。但是问题是，即使没有滚动内容，也会出现滚动条。如果我们在全屏模式下运行以下代码段，那么我们会注意到，滚动条默认情况下是可见的。我需要它们仅在满足最大宽度或最大高度限制时才出现。

.scrollbar{
    height: 150px;
    overflow:scroll;  
}

.big-box{
  height:800px;
  width:1000px;
  background-color:#A8D0DB;
}

   <div class="scrollbar" id="style-1">   
      <div class="big-box"></div>
   </div>

https://jsfiddle.net/g6fehv2w/1/

Answer 1

您可以使用overflow: auto，它仅在内容溢出时显示滚动条。

您可以将overflow-y设置为auto仅在垂直内容溢出时显示滚动条，而将overflow-x设置为auto仅在水平内容溢出时显示滚动条。

请参见documentation。